import React, { useState } from 'react';

import { STORIES } from './constants';

import { Story } from './types';

const StoryCard: React.FC<{ story: Story }> = ({ story }) => {

  const [showAnswer, setShowAnswer] = useState(false);

  return (

    <div className="bg-white rounded-2xl shadow-lg overflow-hidden border border-slate-200 transition-all hover:shadow-xl mb-8">

      <div className="p-6 md:p-8">

        <h2 className="khmer-title text-2xl text-indigo-700 mb-6 border-b pb-2">

          {story.title}

        </h2>

        <div className="space-y-4 mb-8">

          {story.dialogues.map((dialogue, index) => (

            <div key={index} className="flex flex-col space-y-1">

              <span className="text-sm font-bold text-slate-500 uppercase tracking-wider">

                {dialogue.character}

              </span>

              <p className="text-lg text-slate-800 leading-relaxed bg-slate-50 p-3 rounded-lg border-l-4 border-indigo-400">

                "{dialogue.text}"

              </p>

            </div>

          ))}

        </div>

        <div className="bg-amber-50 p-4 rounded-xl border border-amber-200 mb-6">

          <p className="text-amber-900 font-bold flex items-center gap-2">

            <span className="text-xl">❓</span> សំណួរ៖ {story.question}

          </p>

        </div>

        <button

          onClick={() => setShowAnswer(!showAnswer)}

          className="w-full py-3 px-6 bg-indigo-600 text-white font-bold rounded-xl hover:bg-indigo-700 transition-colors focus:ring-4 focus:ring-indigo-200 active:scale-95 flex items-center justify-center gap-2"

        >

          {showAnswer ? "លាក់ចម្លើយ" : "បង្ហាញចម្លើយ"}

        </button>

        {showAnswer && (

          <div className="mt-6 p-5 bg-emerald-50 rounded-xl border border-emerald-200 animate-in fade-in slide-in-from-top-4 duration-300">

            <p className="text-emerald-900 leading-relaxed">

              <span className="font-bold text-emerald-700">✅ ចម្លើយ៖ </span>

              {story.answer}

            </p>

          </div>

        )}

      </div>

    </div>

  );

};

const App: React.FC = () => {

  return (

    <div className="min-h-screen pb-12">

      {/* Header */}

      <header className="bg-indigo-900 text-white py-12 px-4 shadow-xl mb-12 relative overflow-hidden">

        <div className="max-w-4xl mx-auto relative z-10 text-center">

          <h1 className="khmer-title text-4xl md:text-5xl mb-4 drop-shadow-md">

            រឿងប្រកបដោយចំណោទបញ្ហា

          </h1>

          <p className="text-indigo-100 text-lg md:text-xl opacity-90 max-w-2xl mx-auto">

            ស្វែងយល់ពីសាច់រឿង សំណួរ និងចម្លើយ ដែលត្រូវបានបកប្រែជាភាសាខ្មែរយ៉ាងសម្រិតសម្រាំង។

          </p>

        </div>

        {/* Background Decorative Circles */}

        <div className="absolute top-0 right-0 w-64 h-64 bg-indigo-800 rounded-full -translate-y-1/2 translate-x-1/3 opacity-50 blur-3xl"></div>

        <div className="absolute bottom-0 left-0 w-96 h-96 bg-indigo-700 rounded-full translate-y-1/2 -translate-x-1/3 opacity-30 blur-3xl"></div>

      </header>

      {/* Main Content */}

      <main className="max-w-3xl mx-auto px-4">

        {STORIES.map((story) => (

          <StoryCard key={story.id} story={story} />

        ))}

      </main>

      {/* Footer */}

      <footer className="text-center text-slate-400 text-sm mt-12 mb-8">

        <p>© ២០២៤ - ការបកប្រែសម្រួលជាភាសាខ្មែរ</p>

      </footer>

    </div>

  );

};