'use client';

import { Card, CardContent } from '@/components/ui/Card';
import { UserPreferences } from '@/lib/types';
import { SystemInfo } from '@/services/core/system-info';
import { Emoji } from '@/components/ui/Emoji';

interface QuickStatsProps {
  preferences: UserPreferences;
  systemInfo: SystemInfo | null;
}

export function QuickStats({ preferences, systemInfo }: QuickStatsProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
      <Card>
        <CardContent className="p-4">
          <div className="flex items-center gap-3">
            <Emoji emoji="🎨" />
            <div>
              <p className="text-sm text-[var(--muted-foreground)]">
                Thème actuel
              </p>
              <p className="font-medium capitalize">
                {preferences.viewPreferences.theme}
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-4">
          <div className="flex items-center gap-3">
            <Emoji emoji="🔌" />
            <div>
              <p className="text-sm text-[var(--muted-foreground)]">Jira</p>
              <div className="flex items-center gap-2">
                <p className="font-medium">
                  {preferences.jiraConfig.enabled
                    ? 'Configuré'
                    : 'Non configuré'}
                </p>
                {preferences.jiraConfig.enabled && (
                  <span
                    className="w-2 h-2 bg-green-500 rounded-full"
                    title="Jira configuré"
                  ></span>
                )}
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-4">
          <div className="flex items-center gap-3">
            <Emoji emoji="📏" />
            <div>
              <p className="text-sm text-[var(--muted-foreground)]">
                Taille police
              </p>
              <p className="font-medium capitalize">
                {preferences.viewPreferences.fontSize}
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-4">
          <div className="flex items-center gap-3">
            <Emoji emoji="💾" />
            <div>
              <p className="text-sm text-[var(--muted-foreground)]">
                Sauvegardes
              </p>
              <p className="font-medium">
                {systemInfo ? systemInfo.database.totalBackups : '...'}
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
