import React from 'react';
import type { SocialLinksData } from '../types';
import LinkedInIcon from './icons/LinkedInIcon';
import XIcon from './icons/XIcon';
import GithubIcon from './icons/GithubIcon';
import TiktokIcon from './icons/TiktokIcon';
import VerifiedIcon from './icons/VerifiedIcon';
import ArrowRightIcon from './icons/ArrowRightIcon';
import InstagramIcon from './icons/InstagramIcon';
import FacebookIcon from './icons/FacebookIcon';
import DiscordIcon from './icons/DiscordIcon';

interface SocialLinksProps {
  links: SocialLinksData;
}

const socialPlatforms = [
  { key: 'linkedin', name: 'LinkedIn', icon: <LinkedInIcon />, iconBg: 'bg-gradient-to-br from-blue-500 to-sky-400' },
  { key: 'x', name: 'X (Twitter)', icon: <XIcon />, iconBg: 'bg-gradient-to-br from-slate-900 to-slate-700' },
  { key: 'github', name: 'GitHub', icon: <GithubIcon />, iconBg: 'bg-gradient-to-br from-slate-900 to-slate-700' },
  { key: 'tiktok', name: 'TikTok', icon: <TiktokIcon />, iconBg: 'bg-gradient-to-br from-black via-rose-500 to-cyan-400' },
  { key: 'instagram', name: 'Instagram', icon: <InstagramIcon />, iconBg: 'bg-gradient-to-br from-purple-500 via-pink-500 to-yellow-500' },
  { key: 'facebook', name: 'Facebook', icon: <FacebookIcon />, iconBg: 'bg-gradient-to-br from-blue-700 to-blue-500' },
  { key: 'discord', name: 'Discord', icon: <DiscordIcon />, iconBg: 'bg-gradient-to-br from-indigo-600 to-purple-500' },
] as const;


const SocialLinks: React.FC<SocialLinksProps> = ({ links }) => {
  return (
    <div className="bg-white rounded-2xl border border-slate-200 p-6">
      <h2 className="text-xl font-bold text-slate-800 mb-4">Verified Social Accounts</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {socialPlatforms.map((platform) => {
          const link = links[platform.key];
          if (!link) return null;
          return (
            <a
              key={platform.key}
              href={link}
              target="_blank"
              rel="noopener noreferrer"
              className={`group flex items-center justify-between p-4 rounded-xl bg-slate-50 transition-colors duration-300 ease-in-out hover:bg-slate-100`}
            >
              <div className="flex items-center overflow-hidden">
                <div className={`flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center text-white ${platform.iconBg}`}>
                    {platform.icon}
                </div>
                <div className="ml-4">
                    <div className="flex items-center">
                        <h3 className="font-bold text-slate-800 text-sm">{platform.name}</h3>
                        <div className="ml-2 flex items-center bg-green-100 text-green-800 text-xs font-medium px-2 py-0.5 rounded-full">
                            <VerifiedIcon className="w-3 h-3 mr-1" />
                            Verified
                        </div>
                    </div>
                    <p className="text-xs text-slate-500 font-mono truncate max-w-[120px] sm:max-w-xs">{link.replace(/^https?:\/\/(www\.)?/, '')}</p>
                </div>
              </div>

              <div className="text-slate-400 group-hover:text-slate-800 transition-transform duration-300 group-hover:translate-x-1">
                <ArrowRightIcon className="w-4 h-4" />
              </div>
            </a>
          );
        })}
      </div>
    </div>
  );
};

export default SocialLinks;