'use client'

import * as React from 'react'
import { SocialBlock as SocialBlockType, SocialLink } from '../types'
import { Linkedin, Twitter, Facebook, Instagram, Youtube, Github, Globe } from 'lucide-react'

interface SocialBlockProps {
  block: SocialBlockType
  onChange: (block: SocialBlockType) => void
  isEditing?: boolean
}

const PLATFORM_ICONS: Record<SocialLink['platform'], React.ComponentType<{ className?: string; style?: React.CSSProperties }>> = {
  linkedin: Linkedin,
  twitter: Twitter,
  facebook: Facebook,
  instagram: Instagram,
  youtube: Youtube,
  github: Github,
  website: Globe,
}

const PLATFORM_COLORS: Record<SocialLink['platform'], string> = {
  linkedin: '#0A66C2',
  twitter: '#1DA1F2',
  facebook: '#1877F2',
  instagram: '#E4405F',
  youtube: '#FF0000',
  github: '#333333',
  website: '#6b7280',
}

export function SocialBlockEditor({ block, onChange, isEditing = true }: SocialBlockProps) {
  const iconSize = block.iconSize || 24
  const alignClass =
    block.alignment === 'left'
      ? 'justify-start'
      : block.alignment === 'right'
        ? 'justify-end'
        : 'justify-center'

  return (
    <div className={`flex gap-3 py-3 ${alignClass}`}>
      {block.links.map((link) => {
        const Icon = PLATFORM_ICONS[link.platform]
        const color = PLATFORM_COLORS[link.platform]
        if (isEditing || !link.url) {
          return (
            <span
              key={link.id}
              className="inline-flex items-center justify-center rounded"
              style={{ width: iconSize + 8, height: iconSize + 8 }}
            >
              <Icon style={{ width: iconSize, height: iconSize, color }} />
            </span>
          )
        }
        return (
          <a
            key={link.id}
            href={link.url}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center justify-center rounded"
            style={{ width: iconSize + 8, height: iconSize + 8 }}
          >
            <Icon style={{ width: iconSize, height: iconSize, color }} />
          </a>
        )
      })}
    </div>
  )
}

export { PLATFORM_ICONS, PLATFORM_COLORS }