/* Words to learn — vocabulary list screen */
const { TopBar, TabBar, Card, Btn, Icon, Chip, Row } = window.GG;

const WordsToLearn = ({ onStartQuiz = () => {} }) => {
  const themes = ['Greetings', 'Family', 'Food', 'Animals', 'Colors'];
  const [active, setActive] = React.useState('Greetings');
  const words = [
    { en: 'Hello',      gu: 'નમસ્તે', tr: 'Namaste' },
    { en: 'How are you?', gu: 'કેમ છો', tr: 'Kem cho' },
    { en: 'Good morning', gu: 'સુપ્રભાત', tr: 'Suprabhat' },
    { en: 'Good night',   gu: 'શુભ રાત્રિ', tr: 'Shubh ratri' },
    { en: 'Yes', gu: 'હા', tr: 'Ha' },
    { en: 'No',  gu: 'ના', tr: 'Na' },
    { en: 'Goodbye', gu: 'આવજો', tr: 'Aavjo' },
  ];

  return (
    <div className="gg-screen">
      <TopBar stats={{ streak: 5, coins: 40, hearts: 3 }} />

      <div className="gg-body">
        <div style={{ marginBottom: 16 }}>
          <h2 className="gg-section-h" style={{ margin: 0, fontSize: 22 }}>Words to learn</h2>
          <div style={{ font: '500 12px var(--font-ui)', color: '#8e8e93', marginTop: 2 }}>Tap a word to hear it spoken</div>
        </div>

        <div style={{ display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 8, marginBottom: 14 }}>
          {themes.map(t => (
            <Chip key={t} active={active === t} onClick={() => setActive(t)}>{t}</Chip>
          ))}
        </div>

        <div>
          {words.map(w => (
            <Row
              key={w.en}
              left={
                <div style={{ width: 36, height: 36, borderRadius: 9999, background: '#e8efff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name="volume-2" size={16} color="#1456f0" stroke={2} />
                </div>
              }
              title={w.en}
              sub={`${w.gu} · ${w.tr}`}
              right={<Icon name="chevron-right" size={18} color="#8e8e93" />}
            />
          ))}
        </div>

        <div style={{ marginTop: 20 }}>
          <Btn variant="brand" pill block onClick={onStartQuiz}>
            Start quiz <Icon name="arrow-right" size={16} color="#fff" stroke={2.25} />
          </Btn>
        </div>
      </div>

      <TabBar active="learn" />
    </div>
  );
};

window.WordsToLearn = WordsToLearn;