'use client';

import { useEffect, useState } from 'react';
import { useI18n } from '@/features/i18n/model/useI18n';
import { getPreferences, savePreferences } from '@/shared/lib/store';

export default function SettingsPage() {
  const { t } = useI18n();
  const [hideSeconds, setHideSeconds] = useState(false);

  useEffect(() => {
    const prefs = getPreferences();
    setHideSeconds(prefs.hideSeconds);
  }, []);

  const handleToggle = () => {
    const newValue = !hideSeconds;
    setHideSeconds(newValue);
    savePreferences({ hideSeconds: newValue });
  };

  return (
    <div className="p-6">
      <h1 className="text-xl font-bold text-slate-100 mb-8">{t('settings.title')}</h1>
      
      <div className="space-y-6">
        <div className="flex items-center justify-between bg-slate-900/40 p-4 rounded-xl border border-slate-800">
          <div>
            <h3 className="font-medium text-slate-200">{t('settings.hideSeconds.title')}</h3>
            <p className="text-xs text-slate-500">{t('settings.hideSeconds.description')}</p>
          </div>
          <button 
            onClick={handleToggle}
            className={`w-12 h-6 rounded-full transition-colors relative ${hideSeconds ? 'bg-indigo-600' : 'bg-slate-700'}`}
          >
            <div className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-transform ${hideSeconds ? 'left-7' : 'left-1'}`} />
          </button>
        </div>
      </div>
    </div>
  );
}