import { SettingsModel } from '@/types';

interface SettingsGeneralProps {
    settings: SettingsModel;
    onChange: (field: keyof SettingsModel, checked: boolean) => void;
}

export function SettingsGeneral({ settings, onChange }: SettingsGeneralProps) {
    return (
        <div className="space-y-6">
            <div className="bg-white/5 p-4 rounded-lg overflow-auto max-h-96">
                <h3 className="text-white/90 font-medium mb-2">반환된 설정 데이터 (Debug)</h3>
                <pre className="text-xs text-white/70 whitespace-pre-wrap font-mono">
                    {JSON.stringify(settings, null, 2)}
                </pre>
            </div>

            <div className="space-y-4">
                <h3 className="text-lg font-semibold text-white/90 mb-4">기본 설정</h3>

                <label className="flex items-center space-x-3 cursor-pointer group">
                    <div className="relative">
                        <input
                            type="checkbox"
                            className="sr-only peer"
                            checked={settings.FullScreen}
                            onChange={(e) => onChange('FullScreen', e.target.checked)}
                        />
                        <div className="w-10 h-6 bg-white/20 rounded-full peer peer-checked:bg-primary-500 peer-focus:ring-2 peer-focus:ring-primary-500/50 transition-all"></div>
                        <div className="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-all peer-checked:translate-x-4"></div>
                    </div>
                    <span className="text-white/80 group-hover:text-white transition-colors">전체 화면으로 시작</span>
                </label>

                <label className="flex items-center space-x-3 cursor-pointer group">
                    <div className="relative">
                        <input
                            type="checkbox"
                            className="sr-only peer"
                            checked={settings.DupWindow}
                            onChange={(e) => onChange('DupWindow', e.target.checked)}
                        />
                        <div className="w-10 h-6 bg-white/20 rounded-full peer peer-checked:bg-primary-500 peer-focus:ring-2 peer-focus:ring-primary-500/50 transition-all"></div>
                        <div className="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-all peer-checked:translate-x-4"></div>
                    </div>
                    <span className="text-white/80 group-hover:text-white transition-colors">창 중복 실행 허용</span>
                </label>

                <label className="flex items-center space-x-3 cursor-pointer group">
                    <div className="relative">
                        <input
                            type="checkbox"
                            className="sr-only peer"
                            checked={settings.Disable8HourOver}
                            onChange={(e) => onChange('Disable8HourOver', e.target.checked)}
                        />
                        <div className="w-10 h-6 bg-white/20 rounded-full peer peer-checked:bg-primary-500 peer-focus:ring-2 peer-focus:ring-primary-500/50 transition-all"></div>
                        <div className="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-all peer-checked:translate-x-4"></div>
                    </div>
                    <span className="text-white/80 group-hover:text-white transition-colors">8시간 초과 근무 경고 비활성화</span>
                </label>
            </div>
        </div>
    );
}
