import React from "react";
import { SfSyncSocialIconPlatform } from "@app/models/global";
import {
  XIcon,
  InstagramIcon,
  TikTokIcon,
  YouTubeIcon,
  FacebookIcon,
  WhatsAppIcon,
  WebsiteIcon,
} from "@app/assets/images/platform-icons";

export const PLATFORM_ICON_OPTIONS: Array<{
  platform: SfSyncSocialIconPlatform;
  label: string;
}> = [
  { platform: "x", label: "X" },
  { platform: "instagram", label: "Instagram" },
  { platform: "tiktok", label: "TikTok" },
  { platform: "youtube", label: "YouTube" },
  { platform: "facebook", label: "Facebook" },
  { platform: "whatsapp", label: "WhatsApp" },
  { platform: "website", label: "Website" },
  { platform: "custom", label: "Custom" },
];

const ICON_MAP: Partial<Record<SfSyncSocialIconPlatform, React.ReactElement>> = {
  x: XIcon,
  instagram: InstagramIcon,
  tiktok: TikTokIcon,
  youtube: YouTubeIcon,
  facebook: FacebookIcon,
  whatsapp: WhatsAppIcon,
  website: WebsiteIcon,
};

export interface PlatformIconProps {
  platform?: SfSyncSocialIconPlatform;
}

const PlatformIcon: React.FC<PlatformIconProps> = ({ platform }) => {
  if (!platform) {
    return null;
  }
  return ICON_MAP[platform] ?? null;
};

export default PlatformIcon;