import { getMessages } from '../messages/index.js';

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

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

export function Keyboard({ letterColors, onKeyPress }: KeyboardProps) {
  const m = getMessages();
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '5px', alignItems: 'center', marginTop: '12px', width: '95vw', maxWidth: '340px', margin: '12px auto 0' }}>
      {m.keyboardRows.map((row, rowIdx) => (
        <div key={rowIdx} style={{ display: 'flex', gap: '4px', width: '100%', justifyContent: 'center' }}>
          {row.map((key) => {
            const isSpecial = key === m.keyEnter || key === m.keyBackspace;
            const isBackspace = key === m.keyBackspace;
            const letter = isSpecial ? '' : key;
            const color = isSpecial ? undefined : letterColors[letter];
            const bg = color ? COLOR_MAP[color] : '#d3d6da';
            const fg = color ? '#fff' : '#000';
            const label = isBackspace ? m.backspaceLabel : key.toUpperCase();
            const flexBasis = isSpecial ? '15%' : '8%';

            return (
              <div
                key={key}
                onClick={() => onKeyPress(isBackspace ? m.keyBackspace : key)}
                style={{
                  flex: `0 0 ${flexBasis}`,
                  height: '42px',
                  backgroundColor: bg,
                  color: fg,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: isSpecial ? '0.7rem' : '0.78rem',
                  fontWeight: 'bold',
                  borderRadius: '4px',
                  cursor: 'pointer',
                  userSelect: 'none',
                  fontFamily: 'monospace',
                }}
              >
                {label}
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
}
