import { useState } from "react";
import { EditKeySkillsModal } from "./EditKeySkillsModal";

export function KeySkillsCard({ user }: { user: any }) {
  const skills = user?.skills || [];

  const [isEditModalOpen, setIsEditModalOpen] = useState(false);

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 relative">
      <button onClick={() => setIsEditModalOpen(true)} className="absolute top-4 right-4 text-sm font-medium text-[#ff6b00] hover:underline">
        Edit
      </button>

      <h3 className="font-semibold text-gray-900 text-lg mb-4">Key Skills</h3>
      
      <div className="flex flex-wrap gap-2">
        {skills.length > 0 ? (
          skills.map((skill: any, index: number) => (
            <div 
              key={index} 
              className="px-4 py-1.5 rounded-full border border-[#ff6b00] text-[#ff6b00] text-sm font-medium bg-white"
            >
              {skill.skill_name || skill}
            </div>
          ))
        ) : (
          <div className="text-gray-500 text-sm font-medium">No skills added yet.</div>
        )}
      </div>

      <EditKeySkillsModal 
        isOpen={isEditModalOpen}
        onClose={() => setIsEditModalOpen(false)}
        user={user}
      />
    </div>
  );
}