import React from 'react';
import { Building2, Briefcase, Calendar, Edit, Trash2 } from 'lucide-react';
// import { EmployeeExperienceAPIInterface } from '@/helpers/apiSchema/employeeExperience.schema';

interface EmployeeExperienceListProps {
  experiences: any[];
  onEdit: (experience: any) => void;
  onDelete: (experienceId: number) => void;
}

export const EmployeeExperienceList: React.FC<EmployeeExperienceListProps> = ({ 
  experiences, 
  onEdit, 
  onDelete 
}) => {
  return (
    <ul className="employee-experience__list space-y-4">
      {experiences?.map((experience) => (
        <li key={experience.id} className="relative">
          <div className="bg-white shadow-md rounded-lg p-4 border border-gray-200 hover:shadow-lg transition-shadow">
            <div className="flex items-center mb-2">
              <Building2 className="mr-3 text-blue-600" size={24} />
              <h3 className="text-lg font-semibold text-gray-900">
                {experience.company}
              </h3>
            </div>
            
            <div className="flex items-center text-foreground">
              <Briefcase className="mr-3" size={16} />
              <span className="text-sm">{experience.designation}</span>
            </div>
            
            <div className="flex items-center text-gray-600">
              <Calendar className="mr-3 text-gray-500" size={16} />
              <span className="text-foreground text-sm">
                {new Date(experience.from_date).toLocaleDateString()} - 
                {new Date(experience.to_date).toLocaleDateString()}
              </span>
            </div>
            
            <div className="mt-4 text-sm text-gray-500">
              <span className="mr-2 bg-blue-100 text-blue-800 px-2 py-1 rounded">
                {experience.industry}
              </span>
              <span className="bg-green-100 text-green-800 px-2 py-1 rounded">
                Level {experience.job_level}
              </span>
            </div>

            {/* Action Buttons */}
            <div className="absolute top-4 right-4 flex space-x-2">
              <button 
                onClick={() => onEdit(experience)}
                className="text-yellow-500 hover:text-yellow-700"
                title="Edit Experience"
              >
                <Edit size={20} />
              </button>
              <button 
                onClick={() => onDelete(experience.id)}
                className="text-red-500 hover:text-red-700"
                title="Delete Experience"
              >
                <Trash2 size={20} />
              </button>
            </div>
          </div>
        </li>
      ))}
    </ul>
  );
};