import {
    FacebookSVG,
    InstagramSVG,
    TiktokSVG,
    XiaohongshuSVG,
} from '@/Component/Common/SVGs/CommonSVG';
import { YoutubeSVG } from '@/Component/Common/SVGs/AuthSVG';

const platformIconMap: Record<string, (className: string) => JSX.Element> = {
    facebook: (className) => <FacebookSVG customClass={className} />,
    instagram: (className) => <InstagramSVG customClass={className} />,
    youtube: (className) => <YoutubeSVG customClass={className} />,
    tiktok: (className) => <TiktokSVG customClass={className} />,
    xiaohongshu: (className) => <XiaohongshuSVG customClass={className} />,
};

interface CampaignPlatformIconsProps {
    platforms?: string[];
    iconClassName?: string;
}

const CampaignPlatformIcons = ({
    platforms,
    iconClassName = 'w-5 h-5',
}: CampaignPlatformIconsProps) => {
    if (!platforms?.length) return null;

    return (
        <div className="flex items-center gap-1.5 shrink-0 max-md:hidden">
            {platforms.map((platform) => {
                const key = platform.toLowerCase();
                const renderIcon = platformIconMap[key];
                if (!renderIcon) return null;

                return (
                    <span key={platform} title={platform} className="inline-flex">
                        {renderIcon(iconClassName)}
                    </span>
                );
            })}
        </div>
    );
};

export default CampaignPlatformIcons;