interface HeaderProps {
  title: string;
  subtitle: string;
  stats: {
    total: number;
    completed: number;
    inProgress: number;
    todo: number;
    completionRate: number;
  };
}

export function Header({ title, subtitle, stats }: HeaderProps) {
  return (
    <header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
      <div className="container mx-auto px-4 py-6">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          {/* Titre et sous-titre */}
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
              {title}
            </h1>
            <p className="text-gray-600 dark:text-gray-400 mt-1">
              {subtitle}
            </p>
          </div>

          {/* Statistiques */}
          <div className="flex flex-wrap gap-4">
            <StatCard 
              label="Total" 
              value={stats.total} 
              color="blue"
            />
            <StatCard 
              label="Terminées" 
              value={stats.completed} 
              color="green"
            />
            <StatCard 
              label="En cours" 
              value={stats.inProgress} 
              color="yellow"
            />
            <StatCard 
              label="À faire" 
              value={stats.todo} 
              color="gray"
            />
            <StatCard 
              label="Taux" 
              value={`${stats.completionRate}%`} 
              color="purple"
            />
          </div>
        </div>
      </div>
    </header>
  );
}

interface StatCardProps {
  label: string;
  value: number | string;
  color: 'blue' | 'green' | 'yellow' | 'gray' | 'purple';
}

function StatCard({ label, value, color }: StatCardProps) {
  const colorClasses = {
    blue: 'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/20 dark:text-blue-300 dark:border-blue-800',
    green: 'bg-green-50 text-green-700 border-green-200 dark:bg-green-900/20 dark:text-green-300 dark:border-green-800',
    yellow: 'bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-300 dark:border-yellow-800',
    gray: 'bg-gray-50 text-gray-700 border-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700',
    purple: 'bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-900/20 dark:text-purple-300 dark:border-purple-800'
  };

  return (
    <div className={`px-3 py-2 rounded-lg border text-sm font-medium ${colorClasses[color]}`}>
      <div className="text-xs opacity-75 uppercase tracking-wide">
        {label}
      </div>
      <div className="text-lg font-bold">
        {value}
      </div>
    </div>
  );
}