import React from 'react';
import { Users, TrendingUp, Calendar, DollarSign } from 'lucide-react';

interface EmployeeDashboardProps {
  totalEmployees?: number;
  activeEmployees?: number;
  newHires?: number;
  avgTenure?: string;
  departments?: Array<{ name: string; count: number }>;
}

export const EmployeeDashboard: React.FC<EmployeeDashboardProps> = ({
  totalEmployees = 0,
  activeEmployees = 0,
  newHires = 0,
  avgTenure = 'N/A',
  departments = [],
}) => {
  return (
    <div className="p-6 bg-white rounded-lg shadow">
      <h2 className="text-2xl font-bold mb-6">Employee Dashboard</h2>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <div className="bg-blue-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Total Employees</p>
              <p className="text-3xl font-bold text-blue-600">{totalEmployees}</p>
            </div>
            <Users className="w-12 h-12 text-blue-400" />
          </div>
        </div>
        
        <div className="bg-green-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Active</p>
              <p className="text-3xl font-bold text-green-600">{activeEmployees}</p>
            </div>
            <TrendingUp className="w-12 h-12 text-green-400" />
          </div>
        </div>
        
        <div className="bg-purple-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">New Hires (30d)</p>
              <p className="text-3xl font-bold text-purple-600">{newHires}</p>
            </div>
            <Calendar className="w-12 h-12 text-purple-400" />
          </div>
        </div>
        
        <div className="bg-orange-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Avg Tenure</p>
              <p className="text-3xl font-bold text-orange-600">{avgTenure}</p>
            </div>
            <DollarSign className="w-12 h-12 text-orange-400" />
          </div>
        </div>
      </div>

      <div className="mt-6">
        <h3 className="text-lg font-semibold mb-3">Employees by Department</h3>
        <div className="space-y-2">
          {departments.map((dept, idx) => (
            <div key={idx} className="flex items-center justify-between bg-gray-50 p-3 rounded">
              <span className="font-medium">{dept.name}</span>
              <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
                {dept.count}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};
