import React from 'react';
import { Pointer } from 'lucide-react';
import { cn } from '@/lib/utils';


export function ShoppableImageRenderer({ section, className }: { section: any; className?: string }) {
    const { title, subtitle, image, hotspots } = section.props;
    const styles = section.styles || {};
    const elementStyles = section.elementStyles || {};
    
    const displayTitle = title?.value;
    const displaySubtitle = subtitle?.value;
    const displayImage = image?.value;
    const displayHotspots = hotspots?.value || [];

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

            <div className="max-w-4xl mx-auto">
                {(displayTitle || displaySubtitle) && (
                    <div className="mb-8 text-center">
                        {displayTitle && (
                            <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="relative rounded-xl overflow-hidden bg-gray-100 aspect-[16/9] border-2 border-dashed border-gray-300 flex items-center justify-center">
                    {displayImage ? (
                        <>
                            <img src={displayImage} alt="Shoppable Preview" className="w-full h-full object-cover opacity-50" />
                            {displayHotspots.map((hotspot: any, idx: number) => (
                                <div
                                    key={idx}
                                    className="absolute w-6 h-6 rounded-full bg-primary text-white flex items-center justify-center border-2 border-white shadow-lg text-xs font-bold"
                                    style={{ left: `${hotspot.x}%`, top: `${hotspot.y}%`, transform: 'translate(-50%, -50%)' }}
                                >
                                    {idx + 1}
                                </div>
                            ))}
                        </>
                    ) : (
                        <div className="text-center text-gray-400">
                            <Pointer className="w-12 h-12 mx-auto mb-2 opacity-50" />
                            <p className="font-medium">Shoppable Image Area</p>
                            <p className="text-sm">Configure image and hotspots in the inspector</p>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}
