import { useRef } from 'react';
import { Section } from '@/components/ui/Section';
import { SectionTitle } from '@/components/ui/SectionTitle';
import { Eyebrow } from '@/components/ui/Eyebrow';
import { cn } from '@/lib/utils';
import { NoticiaCard } from './NoticiaCard';
import { CarouselProgress } from './CarouselProgress';
import { MediaPlaceholder } from './MediaPlaceholder';
import type { BlogSectionContent } from './types';

/*
 * Seção "Blog" (wireframe 47:4217). Topo em 2 colunas + carrossel de NoticiaCard.
 * `sectionClassName` permite variantes de fundo (ex.: Segurança usa fundo branco).
 */
export function BlogSection({
    content,
    sectionClassName = 'bg-gray-100 py-14 web:py-24',
}: {
    content: BlogSectionContent;
    sectionClassName?: string;
}) {
    const trackRef = useRef<HTMLDivElement>(null);
    return (
        <Section className={cn(sectionClassName)}>
            <div className="grid items-center gap-10 web:grid-cols-2 web:gap-16">
                <div className="max-w-[520px]">
                    <Eyebrow>{content.eyebrow}</Eyebrow>
                    <SectionTitle className="mt-2">{content.title}</SectionTitle>
                    <p className="mt-5 text-body text-gray-600">{content.description}</p>
                </div>
                {content.video ? (
                    <video
                        className="aspect-[529/328] w-full rounded-xl object-cover"
                        src={content.video}
                        poster={content.poster}
                        autoPlay
                        muted
                        loop
                        playsInline
                    />
                ) : (
                    <MediaPlaceholder label="Vídeo" className="aspect-[529/328] w-full web:order-last" />
                )}
            </div>

            <div
                ref={trackRef}
                className="carousel-bleed mt-10 flex gap-7 overflow-x-auto pr-7 web:mx-0 web:mt-14 web:grid web:grid-cols-3 web:overflow-visible web:pr-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
            >
                {content.artigos.map((item) => (
                    <NoticiaCard key={item.href} item={item} className="w-[308px] shrink-0 web:w-full" />
                ))}
            </div>

            <CarouselProgress trackRef={trackRef} className="mt-7 web:hidden" />
        </Section>
    );
}