import React from 'react';
import { User, Mail, Calendar, Clock, Award,AlertTriangle } from 'lucide-react';

interface UserProfileProps {
  user: {
    id?: number;
    nom: string;
    prenom: string;
    email: string;
    department?: string;
    role?: string;
    joinDate?: string;
  };
  totalHours: number;
  totalEntries: number;
}

const UserProfile: React.FC<UserProfileProps> = ({ user, totalHours, totalEntries }) => {
  // Valeurs par défaut si les données manquent
  
  const role ='Formateur';
  const joinDate = user.joinDate || new Date().getFullYear().toString();

  return (
    <div className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
      <div className="bg-[#198ab4] p-4 sm:p-6">
        <div className="flex flex-col sm:flex-row items-center gap-4">
          <div className="w-16 h-16 sm:w-20 sm:h-20 bg-white/20 rounded-full flex items-center justify-center">
            <User className="h-8 w-8 sm:h-10 sm:w-10 text-white" />
          </div>
          <div className="text-center sm:text-left">
            <h2 className="text-xl sm:text-2xl font-bold text-white">
              {user.prenom} {user.nom}
            </h2>
            <p className="text-blue-100 text-sm sm:text-base">{role}</p>
           
          </div>
        </div>
      </div>
      
      {/* Informations du profil */}
      <div className="p-4 sm:p-6">
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
          <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
            <Mail className="h-5 w-5 text-gray-600 flex-shrink-0" />
            <div className="min-w-0">
              <p className="text-xs text-gray-500">Email</p>
              <p className="text-sm font-medium text-gray-800 truncate">{user.email}</p>
            </div>
          </div>
          <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
            <Calendar className="h-5 w-5 text-gray-600 flex-shrink-0" />
            <div className="min-w-0">
              <p className="text-xs text-gray-500">Depuis</p>
              <p className="text-sm font-medium text-gray-800">{joinDate}</p>
            </div>
          </div>

      
        </div>
        
        {/* Statistiques */}
        <div className="border-t border-gray-100 pt-4">
          <h3 className="text-lg font-semibold text-gray-800 mb-4">Statistiques du mois</h3>
          <div className="grid grid-cols-2 gap-4">
            <div className="text-center p-4 bg-blue-50 rounded-lg">
              <div className="text-2xl sm:text-3xl font-bold text-cyan-600">{totalHours}</div>
              <div className="text-xs sm:text-sm text-cyan-600">Heures déclarées</div>
            </div>
            <div className="text-center p-4 bg-[#7e5aa2cc] rounded-lg">
              <div className="text-2xl sm:text-3xl font-bold text-[#fff]">{totalEntries}</div>
              <p className="text-xs sm:text-sm text-[#fff]">Déclarations</p>
            </div>
          </div>
        </div>

    
       
      </div>
    </div>
  );
};

export default UserProfile;