import React from 'react';
import { Page } from './_util';
import { useTranslation } from '../i18n/useTranslation';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Switch } from '@/components/ui/switch';
import { useHapticsPreference } from '../hooks/useHapticsPreference';
import { triggerHaptic } from '../lib/haptics';

export default function SettingsPage() {
  const { t } = useTranslation();
  const { enabled: hapticsEnabled, setEnabled: setHapticsEnabled, supported: hapticsSupported } = useHapticsPreference();
  return (
    <Page title={t('settings.title')}>
      <p className="text-sm text-muted-foreground">{t('settings.subtitle')}</p>
      <div className="mt-4 space-y-4">
        <Card>
          <CardHeader className="pb-3">
            <CardTitle>{t('settings.haptics.title')}</CardTitle>
            <CardDescription>{t('settings.haptics.description')}</CardDescription>
          </CardHeader>
          <CardContent className="space-y-2">
            <div className="flex items-center justify-between gap-4">
              <span className="text-sm font-medium">{t('settings.haptics.label')}</span>
              <Switch
                checked={hapticsEnabled}
                onCheckedChange={(checked) => {
                  setHapticsEnabled(checked);
                  if (checked) {
                    triggerHaptic('selection');
                  }
                }}
                disabled={!hapticsSupported}
                aria-label={t('settings.haptics.label')}
              />
            </div>
            {!hapticsSupported && (
              <div className="text-xs text-muted-foreground">{t('settings.haptics.unsupported')}</div>
            )}
          </CardContent>
        </Card>
      </div>
    </Page>
  );
}