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

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 = stateChipLabel(game);
    if (!label && !showNone) return null;
    return (
        <div className="state-chip" data-state={state}>
            <span className="state-dot" />
            {label || 'Not downloaded'}
        </div>
    );
};