import {useTranslation} from 'react-i18next';

import {platformLabel} from '../utils/platforms.js';

// lucide has no brand icons: a short text badge per platform.
const shortName = ({source, platform}) => {
    if (source === 'STEAM') return 'ST';
    return platform ?? (source === 'PSN' ? 'PS' : 'M');
};

/**
 * @param platforms the {source, platform} of every edition of a library entry, see Core's `platforms`
 */
export default function PlatformIcons({platforms}) {
    const {t} = useTranslation();
    if (!platforms?.length) return null;
    return (
        <ul className="flex flex-wrap gap-1">
            {platforms.map((p) => {
                const label = platformLabel(p) ?? t(`LIBRARY.SOURCE.${p.source}`);
                return (
                    <li key={`${p.source}:${p.platform ?? ''}`} title={label} aria-label={label}
                        className="rounded border px-1 text-[10px] leading-4 font-semibold text-muted-foreground">
                        {shortName(p)}
                    </li>
                );
            })}
        </ul>
    );
}