'use client'

import { SectionWrapper } from '@/components/shared/section-wrapper'
import { useScrollAnimation, fadeInUpClass, staggerDelay } from '@/hooks/use-scroll-animation'
import Image from 'next/image'
import type { SectionStyles } from '@/lib/home-config'

interface PartnerLogo {
    name: string
    image_url: string
    url?: string
}

interface PartnersLogosProps {
    config?: {
        heading?: string
        description?: string
        logos: PartnerLogo[]
        styles?: SectionStyles
    }
}

export function PartnersLogos({ config }: PartnersLogosProps) {
    const { ref, isVisible } = useScrollAnimation()
    const heading = config?.heading ?? 'Our Partners & Certifications'
    const description = config?.description
    const logos: PartnerLogo[] = (config?.logos ?? []).filter(l => l.image_url)
    const s = config?.styles ?? {}

    if (logos.length === 0) return null

    return (
        <SectionWrapper bg="white" customBg={s.bg_color}>
            <div ref={ref} className={`text-center mb-10 ${fadeInUpClass(isVisible)}`}>
                <h2
                    className="text-3xl md:text-4xl font-bold text-navy mb-4"
                    style={s.heading_color ? { color: s.heading_color } : undefined}
                >
                    {heading}
                </h2>
                {description && (
                    <p className="text-slate-600 max-w-2xl mx-auto" style={s.text_color ? { color: s.text_color } : undefined}>
                        {description}
                    </p>
                )}
            </div>

            <div className="flex flex-wrap items-center justify-center gap-8 md:gap-12 max-w-5xl mx-auto">
                {logos.map((logo, i) => {
                    const imgElement = (
                        <div
                            key={i}
                            className={`group relative grayscale hover:grayscale-0 opacity-60 hover:opacity-100 transition-all duration-300 ${fadeInUpClass(isVisible)}`}
                            style={staggerDelay(i)}
                        >
                            <Image
                                src={logo.image_url}
                                alt={logo.name}
                                width={140}
                                height={60}
                                className="h-12 md:h-14 w-auto object-contain"
                            />
                        </div>
                    )

                    if (logo.url) {
                        return (
                            <a
                                key={i}
                                href={logo.url}
                                target="_blank"
                                rel="noopener noreferrer"
                                title={logo.name}
                            >
                                {imgElement}
                            </a>
                        )
                    }

                    return imgElement
                })}
            </div>
        </SectionWrapper>
    )
}
