import { Game } from '../lib/types';
import { deriveState } from '../lib/gameState';

const LABELS: Record<string, string> = {
    installed: 'Installed',
    local: 'Local',
    downloading: 'Downloading',
    busy: 'Working',
    none: '',
};

interface Props {
    game: Game;
    /** Render even for `none` (used in the detail modal). */
    showNone?: boolean;
}

export const StateChip = ({ game, showNone = false }: Props) => {
    const state = deriveState(game);
    const label = LABELS[state] ?? '';
    if (!label && !showNone) return null;
    return (
        <div className="state-chip" data-state={state}>
            <span className="state-dot" />
            {label || 'Not downloaded'}
        </div>
    );
};