const COLOR_MAP: Record<string, string> = {
  g: '#6aaa64',
  y: '#c9b458',
  x: '#787c7e',
};

const ROWS = [
  ['q','w','e','r','t','y','u','i','o','p'],
  ['a','s','d','f','g','h','j','k','l'],
  ['Enter','z','x','c','v','b','n','m','⌫'],
];

interface KeyboardProps {
  letterColors: Record<string, string | undefined>;
  onKeyPress: (key: string) => void;
}

export function Keyboard({ letterColors, onKeyPress }: KeyboardProps) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', alignItems: 'center', marginTop: '12px' }}>
      {ROWS.map((row, rowIdx) => (
        <div key={rowIdx} style={{ display: 'flex', gap: '4px' }}>
          {row.map((key) => {
            const isSpecial = key === 'Enter' || key === '⌫';
            const backspace = key === '⌫';
            const letter = isSpecial ? '' : key;
            const color = isSpecial ? undefined : letterColors[letter];
            const bg = color ? COLOR_MAP[color] : isSpecial ? '#d3d6da' : '#d3d6da';
            const fg = color ? '#fff' : '#000';
            const label = backspace ? '⌫' : key.toUpperCase();

            return (
              <div
                key={key}
                onClick={() => onKeyPress(backspace ? 'Backspace' : key)}
                style={{
                  minWidth: isSpecial ? '56px' : '36px',
                  height: '48px',
                  backgroundColor: bg,
                  color: fg,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: isSpecial ? '0.8rem' : '0.85rem',
                  fontWeight: 'bold',
                  borderRadius: '4px',
                  cursor: 'pointer',
                  userSelect: 'none',
                  fontFamily: 'monospace',
                }}
              >
                {label}
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
}
