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

export function LanguagesCard({ user }: { user: any }) {
  const profile = user?.seekerProfile;
  let languages: string[] = [];
  
  if (user?.languages && Array.isArray(user.languages) && user.languages.length > 0) {
    languages = user.languages.map((l: any) => {
      const name = l.language_name || l.name || 'Unknown';
      const englishLevel = l.seekerLanguage_english_level || l.english_level;
      if (englishLevel && name.toLowerCase() === 'english') {
        return `${name} (${englishLevel})`;
      }
      return name;
    });
  }

  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">Languages</h3>
      
      {languages.length === 0 ? (
        <div className="text-gray-400 text-sm italic">
          No languages added
        </div>
      ) : (
        <div className="flex flex-wrap gap-x-6 gap-y-2">
          {languages.map((lang: string, index: number) => (
            <div key={index} className="text-gray-800 font-medium">
              {lang}
            </div>
          ))}
        </div>
      )}

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