'use client';

import { UserPreferences } from '@/lib/types';
import { Header } from '@/components/ui/Header';
import { Card, CardContent } from '@/components/ui/Card';
import { UserPreferencesProvider } from '@/contexts/UserPreferencesContext';
import Link from 'next/link';

interface GeneralSettingsPageClientProps {
  initialPreferences: UserPreferences;
}

export function GeneralSettingsPageClient({ initialPreferences }: GeneralSettingsPageClientProps) {
  return (
    <UserPreferencesProvider initialPreferences={initialPreferences}>
      <div className="min-h-screen bg-[var(--background)]">
        <Header 
          title="TowerControl"
          subtitle="Paramètres généraux"
        />
        
        <div className="container mx-auto px-4 py-4">
          <div className="max-w-4xl mx-auto">
            {/* Breadcrumb */}
            <div className="mb-4 text-sm">
              <Link href="/settings" className="text-[var(--muted-foreground)] hover:text-[var(--primary)]">
                Paramètres
              </Link>
              <span className="mx-2 text-[var(--muted-foreground)]">/</span>
              <span className="text-[var(--foreground)]">Général</span>
            </div>

            {/* Page Header */}
            <div className="mb-6">
              <h1 className="text-2xl font-mono font-bold text-[var(--foreground)] mb-2">
                ⚙️ Paramètres généraux
              </h1>
              <p className="text-[var(--muted-foreground)]">
                Configuration des préférences de l&apos;interface et du comportement général
              </p>
            </div>

            <div className="space-y-6">
              {/* Note développement futur */}
              <Card>
                <CardContent className="p-4">
                  <div className="p-4 bg-[var(--warning)]/10 border border-[var(--warning)]/20 rounded">
                    <p className="text-sm text-[var(--warning)] font-medium mb-2">
                      🚧 Interface de configuration en développement
                    </p>
                    <p className="text-xs text-[var(--muted-foreground)]">
                      Les contrôles interactifs pour modifier ces préférences seront disponibles dans une prochaine version.
                      Pour l&apos;instant, les préférences sont modifiables via les boutons de l&apos;interface principale.
                    </p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </UserPreferencesProvider>
  );
}