import React from 'react';
import { Check, Maximize, Minimize } from 'lucide-react';

interface StepAppearanceProps {
    containerWidth: string;
    primaryColor: string;
    onWidthChange: (width: string) => void;
    onColorChange: (color: string) => void;
}

export function StepAppearance({ containerWidth, primaryColor, onWidthChange, onColorChange }: StepAppearanceProps) {

    const colors = [
        { name: 'Modern Black', value: '#000000', ring: 'ring-gray-900' },
        { name: 'Trusty Blue', value: '#2563eb', ring: 'ring-blue-600' },
        { name: 'Vibrant Purple', value: '#7c3aed', ring: 'ring-purple-600' },
        { name: 'Forest Green', value: '#16a34a', ring: 'ring-green-600' },
        { name: 'Warm Orange', value: '#ea580c', ring: 'ring-orange-600' },
    ];

    const layouts = [
        {
            id: 'max-w-6xl',
            title: 'Boxed',
            description: 'Centered content with whitespace. Best for readability.',
            icon: Minimize
            // Using Minimize as a proxy for "Contained" visual
        },
        {
            id: 'max-w-full',
            title: 'Full Width',
            description: 'Edge-to-edge immersive experience.',
            icon: Maximize
        }
    ];

    return (
        <div className="space-y-8 max-w-2xl mx-auto">
            <div className="text-center">
                <h2 className="text-2xl font-semibold mb-2">Choose your vibe</h2>
                <p className="text-muted-foreground">Customize the look and feel of your store.</p>
            </div>

            <div className="space-y-4">
                <h3 className="text-sm font-medium uppercase text-muted-foreground">Layout Style</h3>
                <div className="grid grid-cols-2 gap-4">
                    {layouts.map(layout => {
                        const isSelected = containerWidth === layout.id;
                        const Icon = layout.icon;
                        return (
                            <button
                                key={layout.id}
                                onClick={() => onWidthChange(layout.id)}
                                className={`p-4 rounded-xl border-2 transition-all hover:bg-accent/50 text-left flex items-start gap-4 ${isSelected ? 'border-primary bg-accent/20' : 'border-border'
                                    }`}
                            >
                                <div className={`p-2 rounded-md ${isSelected ? 'bg-primary text-primary-foreground' : 'bg-muted'}`}>
                                    <Icon className="w-5 h-5" />
                                </div>
                                <div>
                                    <div className="font-semibold">{layout.title}</div>
                                    <div className="text-xs text-muted-foreground">{layout.description}</div>
                                </div>
                            </button>
                        );
                    })}
                </div>
            </div>

            <div className="space-y-4">
                <h3 className="text-sm font-medium uppercase text-muted-foreground">Brand Color</h3>
                <div className="flex flex-wrap gap-4">
                    {colors.map(color => {
                        const isSelected = primaryColor === color.value;
                        return (
                            <button
                                key={color.value}
                                onClick={() => onColorChange(color.value)}
                                className={`group relative w-16 h-16 rounded-full flex items-center justify-center transition-all ${isSelected ? `ring-4 ${color.ring} ring-offset-2 ring-offset-background scale-110` : 'hover:scale-105'
                                    }`}
                                style={{ backgroundColor: color.value }}
                                title={color.name}
                            >
                                {isSelected && <Check className="w-6 h-6 text-white drop-shadow-md" />}
                            </button>
                        );
                    })}
                </div>
            </div>
        </div>
    );
}
