language learn

export default function ItalianLearningApp() {
  const lessons = [
    { italian: 'Ciao', english: 'Hello' },
    { italian: 'Grazie', english: 'Thank you' },
    { italian: 'Buongiorno', english: 'Good morning' },
    { italian: 'Arrivederci', english: 'Goodbye' },
    { italian: 'Per favore', english: 'Please' }
  ];

  const [index, setIndex] = React.useState(0);
  const [answer, setAnswer] = React.useState('');
  const [score, setScore] = React.useState(0);
  const [feedback, setFeedback] = React.useState('');

  const current = lessons[index];

  const checkAnswer = () => {
    if (answer.trim().toLowerCase() === current.english.toLowerCase()) {
      setScore(score + 1);
      setFeedback('✅ Correct!');
    } else {
      setFeedback(`❌ Correct answer: ${current.english}`);
    }
  };

  const nextLesson = () => {
    setAnswer('');
    setFeedback('');
    setIndex((index + 1) % lessons.length);
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-green-100 to-white p-6 flex items-center justify-center">
      <div className="bg-white rounded-3xl shadow-xl p-8 w-full max-w-md">
        <h1 className="text-3xl font-bold text-green-600 mb-2">🇮🇹 Learn Italian</h1>
        <p className="text-gray-500 mb-6">Duolingo-inspired practice app</p>

        <div className="mb-4">
          <div className="text-sm text-gray-500">Score</div>
          <div className="text-2xl font-bold">{score}</div>
        </div>

        <div className="bg-green-50 p-4 rounded-2xl mb-4">
          <p className="text-gray-600">Translate:</p>
          <h2 className="text-3xl font-bold">{current.italian}</h2>
        </div>

        <input
          value={answer}
          onChange={(e) => setAnswer(e.target.value)}
          placeholder="Type English translation"
          className="w-full border rounded-xl p-3 mb-4"
        />

        <div className="flex gap-2">
          <button
            onClick={checkAnswer}
            className="flex-1 bg-green-500 text-white p-3 rounded-xl"
          >
            Check
          </button>
          <button
            onClick={nextLesson}
            className="flex-1 bg-blue-500 text-white p-3 rounded-xl"
          >
            Next
          </button>
        </div>

        {feedback && (
          <div className="mt-4 text-lg font-semibold">{feedback}</div>
        )}
      </div>
    </div>
  );
}