'use client'

import { InfiniteSlider } from '@/components/motion-primitives/infinite-slider'
import { ProgressiveBlur } from '@/components/motion-primitives/progressive-blur'
import { useContent } from '@/components/layout/content-provider'

export default function LogoCloud() {
    const content = useContent()
    const { logoCloud } = content.pages.home
    const baseLogo = content.images.logo
    const logoItems = Array.from({ length: 18 }, (_, index) => ({
        src: baseLogo,
        alt: `مستر دکور ${index + 1}`,
    }))

    return (
        <section className="relative overflow-hidden border-t border-b border-border/80 dark:border-primary/20 py-12 md:py-16">
            <div className="group relative m-auto max-w-7xl px-6">
                <div className="flex flex-col items-center justify-center text-center">
                    <div className="mb-4">
                        <p className="text-sm font-semibold text-foreground dark:text-foreground">{logoCloud.title}</p>
                    </div>
                    <div className="relative w-full max-w-6xl py-6" dir="ltr">
                        <InfiniteSlider
                            speedOnHover={20}
                            speed={40}
                            gap={101}
                            direction="horizontal"
                            reverse={false}>
                            {logoItems.map((logo, index) => (
                                <div
                                    key={`${logo.src}-${index}`}
                                    className="flex h-16 w-32 shrink-0 items-center justify-center px-2 md:h-20 md:w-40"
                                >
                                    <img
                                        className="max-h-[64px] w-auto object-contain opacity-70 grayscale dark:invert dark:brightness-75 transition-all duration-300 hover:opacity-100 hover:grayscale-0 dark:hover:invert-0 dark:hover:brightness-100 md:max-h-[76px]"
                                        src={logo.src}
                                        alt={logo.alt}
                                        height={64}
                                        width="auto"
                                    />
                                </div>
                            ))}
                        </InfiniteSlider>
                        <ProgressiveBlur
                            className="pointer-events-none absolute right-0 top-0 h-full w-20 dark:opacity-50"
                            direction="right"
                            blurIntensity={0.8}
                        />
                        <ProgressiveBlur
                            className="pointer-events-none absolute right-0 top-0 h-full w-20 dark:opacity-0"
                            direction="left"
                            blurIntensity={0.5}
                        />
                    </div>
                </div>
            </div>
        </section>
    )
}