import type { GridCell } from '@/types/grid';
import { getStyleForAnsiColor } from '@/utils/ansi';

interface CellProps {
    cell: GridCell;
    onClick?: () => void;
    onMouseEnter?: () => void;
}

export const Cell: React.FC<CellProps> = ({ cell, onClick, onMouseEnter }) => {
    const handleMouseDown = (e: React.MouseEvent) => {
        e.preventDefault(); // Prevent text selection
        onClick?.();
    };

    return (
        <span
            className={`grid-cell ${onClick ? 'highlightable' : ''}`}
            onMouseDown={handleMouseDown}
            onMouseEnter={onMouseEnter}
            style={getStyleForAnsiColor(cell.color)}
        >
            {cell.char === ' ' ? '\u00A0' : cell.char}
        </span>
    );
};