import { useState } from "react";
import Image from "next/image";
import { EditSocialMediaModal } from "./EditSocialMediaModal";

export function SocialMediaLinksCard({ user }: { user: any }) {
  // Use mock links to match UI screenshot
  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 relative">
      <div className="flex items-center justify-between mb-2">
        <h3 className="font-semibold text-gray-900 text-lg">Social Media Links</h3>
        <button onClick={() => setIsEditModalOpen(true)} className="text-sm font-medium text-[#ff6b00] hover:underline flex items-center">
          +Add
        </button>
      </div>
      
      <p className="text-sm text-gray-500 mb-6">
        Connect your social media profiles to enhance your professional presence
      </p>

      <div className="border border-gray-200 rounded-xl p-6">
        {user?.social_links && user.social_links.length > 0 ? (
          <div className="flex flex-wrap items-center gap-6">
            {user.social_links.map((link: any) => (
              <a 
                key={link.id}
                href={link.url}
                target="_blank"
                rel="noopener noreferrer"
                title={link.platform_name}
                className="w-12 h-12 flex items-center justify-center bg-gray-50 rounded-xl hover:opacity-80 transition-opacity border border-gray-100"
              >
                {link.icon_url ? (
                  <Image 
                    src={link.icon_url}
                    alt={link.platform_name || 'Social Platform'}
                    width={32}
                    height={32}
                    className="object-contain"
                  />
                ) : (
                  <span className="text-sm font-semibold text-gray-500">
                    {(link.platform_name || 'Link').charAt(0)}
                  </span>
                )}
              </a>
            ))}
          </div>
        ) : (
          <p className="text-sm text-gray-500 text-center">No social media links connected.</p>
        )}
      </div>

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