"use client";

import { Globe, Image, MessageCircle, Video } from "lucide-react";
import type { SocialPlatform } from "@/lib/types/social-media.types";

const PLATFORM_CONFIG: Record<
  SocialPlatform,
  { icon: React.ElementType; color: string; bg: string; label: string }
> = {
  FACEBOOK: {
    icon: Globe,
    color: "text-blue-600",
    bg: "bg-blue-50",
    label: "Facebook",
  },
  INSTAGRAM: {
    icon: Image,
    color: "text-pink-600",
    bg: "bg-pink-50",
    label: "Instagram",
  },
  TWITTER: {
    icon: MessageCircle,
    color: "text-sky-500",
    bg: "bg-sky-50",
    label: "X / Twitter",
  },
  TIKTOK: {
    icon: Video,
    color: "text-slate-800",
    bg: "bg-slate-50",
    label: "TikTok",
  },
};

interface PlatformIconProps {
  platform: SocialPlatform;
  size?: "sm" | "md" | "lg";
  showLabel?: boolean;
  className?: string;
}

export default function PlatformIcon({
  platform,
  size = "md",
  showLabel = false,
  className = "",
}: PlatformIconProps) {
  const config = PLATFORM_CONFIG[platform];
  const sizeMap = { sm: "h-4 w-4", md: "h-5 w-5", lg: "h-6 w-6" };
  const Icon = config.icon;

  return (
    <span className={`inline-flex items-center gap-1.5 ${className}`}>
      <span
        className={`inline-flex items-center justify-center rounded-lg ${config.bg} p-1.5`}
      >
        <Icon className={`${sizeMap[size]} ${config.color}`} />
      </span>
      {showLabel && (
        <span className="text-sm font-medium text-slate-700">
          {config.label}
        </span>
      )}
    </span>
  );
}

export function PlatformBadge({
  platform,
  className = "",
}: {
  platform: SocialPlatform;
  className?: string;
}) {
  const config = PLATFORM_CONFIG[platform];
  const Icon = config.icon;

  return (
    <span
      className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${config.bg} ${config.color} ${className}`}
    >
      <Icon className="h-3 w-3" />
      {config.label}
    </span>
  );
}