import React from 'react';
import { LayoutDashboard, ShoppingCart, FileText, Check } from 'lucide-react';

interface StepModeProps {
    value: string;
    onChange: (mode: string) => void;
}

export function StepMode({ value, onChange }: StepModeProps) {
    const modes = [
        {
            id: 'full',
            title: 'Immersive App',
            description: 'Your entire store runs as a modern, high-speed app. Best for dedicated e-commerce sites.',
            icon: LayoutDashboard,
        },
        {
            id: 'checkout_only',
            title: 'Checkout Only',
            description: 'Keep your existing theme for pages, but use our super-fast checkout.',
            icon: ShoppingCart,
        },
        {
            id: 'disabled',
            title: 'Standard',
            description: 'Use standard WordPress pages. Good compatibility with legacy plugins.',
            icon: FileText,
        },
    ];

    return (
        <div className="space-y-6">
            <div className="text-center">
                <h2 className="text-2xl font-semibold mb-2">How do you want to run your store?</h2>
                <p className="text-muted-foreground">Select the mode that fits your business needs.</p>
            </div>

            <div className="grid gap-4 md:grid-cols-3">
                {modes.map((mode) => {
                    const Icon = mode.icon;
                    const isSelected = value === mode.id;
                    return (
                        <button
                            key={mode.id}
                            onClick={() => onChange(mode.id)}
                            className={`relative flex flex-col items-start p-6 rounded-xl border-2 transition-all hover:bg-accent/50 text-left h-full ${isSelected ? 'border-primary bg-accent/20' : 'border-border'
                                }`}
                        >
                            <div className={`p-3 rounded-lg mb-4 ${isSelected ? 'bg-primary text-primary-foreground' : 'bg-muted'}`}>
                                <Icon className="w-6 h-6" />
                            </div>
                            <h3 className="font-semibold text-lg mb-2">{mode.title}</h3>
                            <p className="text-sm text-muted-foreground">{mode.description}</p>

                            {isSelected && (
                                <div className="absolute top-4 right-4 text-primary">
                                    <Check className="w-6 h-6" />
                                </div>
                            )}
                        </button>
                    );
                })}
            </div>
        </div>
    );
}
