import type { GuessEntry } from '@wordle/shared';

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

interface GridProps {
  guesses: GuessEntry[];
  maxRows?: number;
}

export function Grid({ guesses, maxRows = 6 }: GridProps) {
  const rows: (GuessEntry | null)[] = [...guesses];
  while (rows.length < maxRows) {
    rows.push(null);
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', alignItems: 'center' }}>
      {rows.map((entry, rowIdx) => (
        <div key={rowIdx} style={{ display: 'flex', gap: '4px' }}>
          {Array.from({ length: 5 }).map((_, colIdx) => {
            const letter = entry?.guess[colIdx] ?? '';
            const colorCode = entry?.colors?.[colIdx];
            const hasFeedback = entry ? entry.colors.length > 0 : false;
            const bg = hasFeedback && colorCode ? COLOR_MAP[colorCode] : 'transparent';
            return (
              <div
                key={colIdx}
                style={{
                  width: '52px',
                  height: '52px',
                  border: `2px solid ${letter ? '#878a8c' : '#d3d6da'}`,
                  backgroundColor: bg,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: '1.5rem',
                  fontWeight: 'bold',
                  color: hasFeedback ? '#fff' : '#000',
                  textTransform: 'uppercase',
                  fontFamily: 'monospace',
                }}
              >
                {letter}
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
}
