import React from 'react';
import { MessageCircle, Twitter, Youtube, Twitch } from 'lucide-react';
import type { DriverProfileSocialHandleViewModel } from '@/lib/view-models/DriverProfileViewModel';

interface SocialHandlesProps {
  socialHandles: DriverProfileSocialHandleViewModel[];
}

function getSocialIcon(platform: DriverProfileSocialHandleViewModel['platform']) {
  switch (platform) {
    case 'twitter':
      return Twitter;
    case 'youtube':
      return Youtube;
    case 'twitch':
      return Twitch;
    case 'discord':
      return MessageCircle;
  }
}

function getSocialColor(platform: DriverProfileSocialHandleViewModel['platform']) {
  switch (platform) {
    case 'twitter':
      return 'hover:text-sky-400 hover:bg-sky-400/10';
    case 'youtube':
      return 'hover:text-red-500 hover:bg-red-500/10';
    case 'twitch':
      return 'hover:text-purple-400 hover:bg-purple-400/10';
    case 'discord':
      return 'hover:text-indigo-400 hover:bg-indigo-400/10';
  }
}

export default function SocialHandles({ socialHandles }: SocialHandlesProps) {
  if (socialHandles.length === 0) return null;

  return (
    <div className="mt-6 pt-6 border-t border-charcoal-outline/50">
      <div className="flex flex-wrap items-center gap-2">
        <span className="text-sm text-gray-500 mr-2">Connect:</span>
        {socialHandles.map((social) => {
          const Icon = getSocialIcon(social.platform);
          return (
            <a
              key={social.platform}
              href={social.url}
              target="_blank"
              rel="noopener noreferrer"
              className={`flex items-center gap-2 px-3 py-1.5 rounded-lg bg-iron-gray/50 border border-charcoal-outline text-gray-400 transition-all ${getSocialColor(social.platform)}`}
            >
              <Icon className="w-4 h-4" />
              <span className="text-sm">{social.handle}</span>
              <svg className="w-3 h-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
              </svg>
            </a>
          );
        })}
      </div>
    </div>
  );
}