import { SettingsModel } from '@/types';
import { Theme } from '@/context/ThemeContext';

interface SettingsThemeProps {
    settings: SettingsModel;
    currentTheme: Theme;
    onSelect: (theme: string) => void;
}

export function SettingsTheme({ settings, currentTheme, onSelect }: SettingsThemeProps) {
    return (
        <div className="space-y-6">
            <h3 className="text-lg font-semibold text-white/90">테마 선택</h3>
            <div className="grid grid-cols-1 gap-4">
                {/* Dark Theme */}
                <button
                    onClick={() => onSelect('dark')}
                    className={`relative group p-4 rounded-xl border-2 transition-all duration-300 text-left ${settings.Theme === 'dark' || (!settings.Theme && currentTheme === 'dark')
                        ? 'border-primary-500 bg-primary-500/10'
                        : 'border-white/10 hover:border-white/30 hover:bg-white/5'
                        }`}
                >
                    <div className="flex items-center justify-between mb-2">
                        <span className="text-white font-medium">Dark (기본)</span>
                        {(settings.Theme === 'dark') && <div className="w-2 h-2 rounded-full bg-primary-500"></div>}
                    </div>
                    <div className="h-16 rounded-lg bg-[#1e1e2e] border border-white/10 flex overflow-hidden">
                        <div className="w-1/4 bg-[#181825] border-r border-white/5"></div>
                        <div className="flex-1 p-2">
                            <div className="h-2 w-2/3 bg-white/10 rounded mb-2"></div>
                            <div className="h-8 w-full bg-[#1e1e2e] border border-primary-500/30 rounded"></div>
                        </div>
                    </div>
                </button>

                {/* PSH_PINK Theme */}
                <button
                    onClick={() => onSelect('PSH_PINK')}
                    className={`relative group p-4 rounded-xl border-2 transition-all duration-300 text-left ${settings.Theme === 'PSH_PINK'
                        ? 'border-[#FF00FF] bg-[#FF00FF]/10'
                        : 'border-white/10 hover:border-white/30 hover:bg-white/5'
                        }`}
                >
                    <div className="flex items-center justify-between mb-2">
                        <span className="text-white font-medium">PSH Pink</span>
                        {settings.Theme === 'PSH_PINK' && <div className="w-2 h-2 rounded-full bg-[#FF00FF]"></div>}
                    </div>
                    <div className="h-16 rounded-lg bg-[#2D0A1E] border border-[#FF66FF]/30 flex overflow-hidden">
                        <div className="w-1/4 bg-[#1A0512] border-r border-[#FF66FF]/20"></div>
                        <div className="flex-1 p-2">
                            <div className="h-2 w-2/3 bg-[#FF66FF]/20 rounded mb-2"></div>
                            <div className="h-8 w-full bg-[#3D0D28] border border-[#FF00FF] rounded relative overflow-hidden">
                                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-[#FF00FF]/10 to-transparent"></div>
                            </div>
                        </div>
                    </div>
                </button>

                {/* JW_SKY Theme */}
                <button
                    onClick={() => onSelect('JW_SKY')}
                    className={`relative group p-4 rounded-xl border-2 transition-all duration-300 text-left ${settings.Theme === 'JW_SKY'
                        ? 'border-sky-400 bg-sky-400/10'
                        : 'border-white/10 hover:border-white/30 hover:bg-white/5'
                        }`}
                >
                    <div className="flex items-center justify-between mb-2">
                        <span className="text-white font-medium">JW Sky</span>
                        {settings.Theme === 'JW_SKY' && <div className="w-2 h-2 rounded-full bg-sky-400"></div>}
                    </div>
                    <div className="h-16 rounded-lg bg-[#0F172A] border border-sky-400/30 flex overflow-hidden">
                        <div className="w-1/4 bg-[#020617] border-r border-sky-400/20"></div>
                        <div className="flex-1 p-2">
                            <div className="h-2 w-2/3 bg-sky-400/20 rounded mb-2"></div>
                            <div className="h-8 w-full bg-[#1E293B] border border-sky-400 rounded"></div>
                        </div>
                    </div>
                </button>
            </div>
        </div>
    );
}