import React from 'react';
import { GalleryHorizontalEnd, ChevronLeft, ChevronRight } from 'lucide-react';
import { cn } from '@/lib/utils';


export function ProductCarouselRenderer({ section, className }: { section: any; className?: string }) {
    const { title, subtitle, cta_text } = section.props;
    const elementStyles = section.elementStyles || {};
    
    const displayTitle = section.props.title?.value || 'Trending Now';
    const displaySubtitle = section.props.subtitle?.value;
    const displayCta = section.props.cta_text?.value;


    return (
        <div className={cn('py-12 px-4', className)}>

            <div className="max-w-6xl mx-auto">
                <div className="flex items-end justify-between mb-8">
                    <div>
                        <h2 
                            className="text-3xl font-bold"
                            style={{ color: elementStyles?.title?.color }}
                        >
                            {displayTitle}
                        </h2>
                        {displaySubtitle && (
                            <p className="text-muted-foreground mt-2" style={{ color: elementStyles?.subtitle?.color }}>
                                {displaySubtitle}
                            </p>
                        )}
                    </div>
                    <div className="flex items-center gap-3">
                        {displayCta && (
                            <span className="text-sm font-semibold mr-4 text-primary">{displayCta} →</span>
                        )}
                        <div className="w-8 h-8 rounded-full border border-border flex items-center justify-center bg-background">
                            <ChevronLeft className="w-4 h-4 text-muted-foreground" />
                        </div>
                        <div className="w-8 h-8 rounded-full border border-border flex items-center justify-center bg-background">
                            <ChevronRight className="w-4 h-4 text-muted-foreground" />
                        </div>
                    </div>
                </div>

                <div className="flex gap-4 overflow-hidden opacity-60">
                    {[1, 2, 3, 4].map((i) => (
                        <div key={i} className="w-48 md:w-60 flex-shrink-0">
                            <div className="aspect-square bg-muted rounded-lg mb-3 flex items-center justify-center border-2 border-dashed border-gray-300">
                                <GalleryHorizontalEnd className="w-8 h-8 text-gray-400" />
                            </div>
                            <div className="h-4 bg-muted rounded w-3/4 mb-2"></div>
                            <div className="h-4 bg-muted rounded w-1/4"></div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}
