import {useTranslation} from 'react-i18next';
import {Ban, CircleCheck, Gamepad2, Inbox, Trophy} from 'lucide-react';

import {Badge} from '@/components/ui/badge';
import {cn} from '@/lib/utils';

export const STATUS_META = {
    BACKLOG: {icon: Inbox, text: 'text-muted-foreground', badge: 'bg-secondary text-secondary-foreground', bar: 'bg-zinc-400 dark:bg-zinc-500'},
    PLAYING: {icon: Gamepad2, text: 'text-primary', badge: 'bg-primary/15 text-primary', bar: 'bg-primary'},
    FINISHED: {icon: CircleCheck, text: 'text-emerald-600 dark:text-emerald-400', badge: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400', bar: 'bg-emerald-500'},
    COMPLETED: {icon: Trophy, text: 'text-amber-600 dark:text-amber-400', badge: 'bg-amber-500/15 text-amber-600 dark:text-amber-400', bar: 'bg-amber-500'},
    DROPPED: {icon: Ban, text: 'text-rose-600 dark:text-rose-400', badge: 'bg-rose-500/15 text-rose-600 dark:text-rose-400', bar: 'bg-rose-500'},
};

/**
 * @param compact shows only the icon below the sm breakpoint
 */
export default function GameStatusBadge({status, compact = false, className}) {
    const {t} = useTranslation();
    const meta = STATUS_META[status];
    if (!meta) return null;
    const Icon = meta.icon;
    const label = t(`BACKLOG.STATUS.${status}`);
    return (
        <Badge className={cn(meta.badge, className)} title={label}>
            <Icon/>
            <span className={compact ? 'hidden sm:inline' : undefined}>{label}</span>
        </Badge>
    );
}