import { useState } from "react";

export default function WordGameApp() {
  const hiragana = [
    "あ","い","う","え","お",
    "か","き","く","け","こ",
    "さ","し","す","せ","そ",
    "た","ち","つ","て","と",
    "な","に","ぬ","ね","の",
    "は","ひ","ふ","へ","ほ",
    "ま","み","む","め","も",
    "や","ゆ","よ",
    "ら","り","る","れ","ろ",
    "わ","を","ん"
  ];

  const [cards, setCards] = useState([]);
  const [word, setWord] = useState("");
  const [words, setWords] = useState([]);

  const drawCards = () => {
    const shuffled = [...hiragana].sort(() => 0.5 - Math.random());
    setCards(shuffled.slice(0, 10));
    setWords([]);
  };

  const addWord = () => {
    if (!word) return;
    setWords([...words, word]);
    setWord("");
  };

  return (
    <div className="p-4 max-w-xl mx-auto">
      <h1 className="text-xl font-bold mb-4">言葉作りゲーム</h1>

      <button
        onClick={drawCards}
        className="bg-blue-500 text-white px-4 py-2 rounded mb-4"
      >
        カードを配る
      </button>

      <div className="flex flex-wrap gap-2 mb-4">
        {cards.map((c, i) => (
          <span key={i} className="border px-2 py-1 rounded">
            {c}
          </span>
        ))}
      </div>

      <input
        value={word}
        onChange={(e) => setWord(e.target.value)}
        placeholder="ことばを入力"
        className="border p-2 mr-2"
      />
      <button
        onClick={addWord}
        className="bg-green-500 text-white px-3 py-2 rounded"
      >
        追加
      </button>

      <div className="mt-4">
        <h2 className="font-semibold">作ったことば</h2>
        <ul>
          {words.map((w, i) => (
            <li key={i}>{w}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}