"use client";

import { useState } from "react";

// Todo型の定義
type Todo = {
  id: number;
  text: string;
  completed: boolean;
};

export default function Home() {
  // 状態管理の準備（サンプルデータ付き）
  const [todos, setTodos] = useState<Todo[]>([
    { id: 1, text: "TypeScriptを学ぶ", completed: false },
    { id: 2, text: "Reactの基礎を理解する", completed: true },
    { id: 3, text: "TODOアプリを作る", completed: false },
  ]);

  return (
    <main className="min-h-screen p-8 bg-gray-50 dark:bg-gray-900">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-4xl font-bold text-center text-gray-800 dark:text-gray-100 mb-8">
          私のTODOアプリ
        </h1>

        {/* TODO入力フォーム */}
        <div className="mb-8">
          <form className="flex gap-2">
            <input
              type="text"
              placeholder="新しいTODOを入力..."
              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100"
            />
            <button
              type="submit"
              className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
            >
              追加
            </button>
          </form>
        </div>

        {/* TODOリスト表示エリア */}
        <div className="space-y-2">
          {todos.map((todo) => (
            <div
              key={todo.id}
              className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm"
            >
              <input
                type="checkbox"
                checked={todo.completed}
                className="w-5 h-5 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
              />
              <span
                className={`flex-1 ${
                  todo.completed
                    ? "line-through text-gray-500 dark:text-gray-400"
                    : "text-gray-800 dark:text-gray-100"
                }`}
              >
                {todo.text}
              </span>
              <button className="px-3 py-1 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors">
                削除
              </button>
            </div>
          ))}
        </div>
      </div>
    </main>
  );
}