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

interface Screen1RulesProps {
  onPlay: () => void;
}

export function Screen1Rules({ onPlay }: Screen1RulesProps) {
  const { rules, title } = getMessages();

  return (
    <div style={{ maxWidth: '400px', margin: '40px auto', padding: '16px', fontFamily: 'sans-serif', position: 'relative' }}>
      <LangSwitch />
      <h1 style={{ textAlign: 'center', fontSize: '2rem', marginBottom: '24px' }}>{title}</h1>

      <h2 style={{ fontSize: '1.2rem', marginBottom: '8px' }}>{rules.heading}</h2>
      <ul style={{ lineHeight: '1.8', paddingLeft: '20px' }}>
        <li>{rules.bullets[0]}</li>
        <li>{rules.bullets[1]}</li>
      </ul>

      <div style={{ display: 'flex', gap: '8px', margin: '12px 0' }}>
        <div style={{ width: '40px', height: '40px', backgroundColor: '#6aaa64', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold', borderRadius: '4px' }}>G</div>
        <span style={{ lineHeight: '40px' }}>{rules.greenDesc}</span>
      </div>
      <div style={{ display: 'flex', gap: '8px', margin: '12px 0' }}>
        <div style={{ width: '40px', height: '40px', backgroundColor: '#c9b458', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold', borderRadius: '4px' }}>Y</div>
        <span style={{ lineHeight: '40px' }}>{rules.yellowDesc}</span>
      </div>
      <div style={{ display: 'flex', gap: '8px', margin: '12px 0' }}>
        <div style={{ width: '40px', height: '40px', backgroundColor: '#787c7e', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold', borderRadius: '4px' }}>X</div>
        <span style={{ lineHeight: '40px' }}>{rules.grayDesc}</span>
      </div>

      <div style={{ textAlign: 'center', marginTop: '32px' }}>
        <button
          onClick={onPlay}
          style={{
            padding: '12px 48px',
            fontSize: '1.1rem',
            fontWeight: 'bold',
            backgroundColor: '#6aaa64',
            color: '#fff',
            border: 'none',
            borderRadius: '8px',
            cursor: 'pointer',
          }}
        >
          {rules.playButton}
        </button>
      </div>
    </div>
  );
}
