'use client'

export interface SocialLink {
  platform: 'twitter' | 'instagram' | 'facebook' | 'youtube' | 'spotify' | 'soundcloud' | 'website'
  url: string
}

export interface SocialLinksProps {
  links: SocialLink[]
  size?: 'sm' | 'md' | 'lg'
}

export function SocialLinks({ links, size = 'md' }: SocialLinksProps) {
  const sizeClasses = {
    sm: 'w-8 h-8',
    md: 'w-10 h-10',
    lg: 'w-12 h-12'
  }

  const iconSize = {
    sm: 'w-4 h-4',
    md: 'w-5 h-5',
    lg: 'w-6 h-6'
  }

  const getPlatformIcon = (platform: SocialLink['platform']) => {
    const className = iconSize[size]

    switch (platform) {
      case 'twitter':
        return (
          <svg className={className} fill="currentColor" viewBox="0 0 24 24">
            <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
          </svg>
        )
      case 'instagram':
        return (
          <svg className={className} fill="currentColor" viewBox="0 0 24 24">
            <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
            <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z" fill="none" stroke="currentColor" strokeWidth="2" />
            <circle cx="17.5" cy="6.5" r="1.5" fill="currentColor" />
          </svg>
        )
      case 'facebook':
        return (
          <svg className={className} fill="currentColor" viewBox="0 0 24 24">
            <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
          </svg>
        )
      case 'youtube':
        return (
          <svg className={className} fill="currentColor" viewBox="0 0 24 24">
            <path d="M22.54 6.42a2.78 2.78 0 00-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 00-1.94 2A29 29 0 001 11.75a29 29 0 00.46 5.33A2.78 2.78 0 003.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 001.94-2 29 29 0 00.46-5.25 29 29 0 00-.46-5.33z" />
            <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" fill="black" />
          </svg>
        )
      case 'spotify':
        return (
          <svg className={className} fill="currentColor" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10" />
            <path d="M8 14.5c.8-.4 2.7-1 4-1s3.2.6 4 1M7.5 11c1-.5 3-1.2 4.5-1.2s3.5.7 4.5 1.2M7 7.5c1.2-.6 3.5-1.5 5-1.5s3.8.9 5 1.5" stroke="black" strokeWidth="1.5" fill="none" strokeLinecap="round" />
          </svg>
        )
      case 'soundcloud':
        return (
          <svg className={className} fill="currentColor" viewBox="0 0 24 24">
            <path d="M1.5 11.5l.5 1-.5 1-.5-1 .5-1zm1 0l.5 2-.5 2-.5-2 .5-2zm1 0l.5 2.5-.5 2.5-.5-2.5.5-2.5zm1 0l.5 3-.5 3-.5-3 .5-3zm1-.5l.5 3.5-.5 3.5-.5-3.5.5-3.5zm1 0l.5 4-.5 4-.5-4 .5-4zm1-.5l.5 4.5-.5 4.5-.5-4.5.5-4.5zm1 0l.5 5-.5 5-.5-5 .5-5zm1-.5l.5 5.5-.5 5.5-.5-5.5.5-5.5zm1 0l.5 6-.5 6-.5-6 .5-6zm1 0l.5 6-.5 6-.5-6 .5-6zm3 1.5c1.5 0 2.5 1 2.5 2.5s-1 2.5-2.5 2.5h-2v-5h2z" />
          </svg>
        )
      case 'website':
        return (
          <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
          </svg>
        )
      default:
        return null
    }
  }

  const getPlatformColor = (platform: SocialLink['platform']) => {
    switch (platform) {
      case 'twitter':
        return 'hover:bg-blue-500'
      case 'instagram':
        return 'hover:bg-pink-500'
      case 'facebook':
        return 'hover:bg-blue-600'
      case 'youtube':
        return 'hover:bg-red-500'
      case 'spotify':
        return 'hover:bg-green-500'
      case 'soundcloud':
        return 'hover:bg-orange-500'
      default:
        return 'hover:bg-zinc-700'
    }
  }

  return (
    <div className="flex items-center gap-3">
      {links.map((link, index) => (
        <a
          key={index}
          href={link.url}
          target="_blank"
          rel="noopener noreferrer"
          className={`${sizeClasses[size]} flex items-center justify-center rounded-full bg-zinc-800 text-zinc-300 ${getPlatformColor(link.platform)} hover:text-white transition`}
          title={link.platform}
        >
          {getPlatformIcon(link.platform)}
        </a>
      ))}
    </div>
  )
}