import dayjs from "dayjs";
import "dayjs/locale/ja";
import { useState } from "react";

dayjs.locale("ja");

const initialTasks = [
  { id: 1, text: "朝のミーティング", done: false },
  { id: 2, text: "仕様書を読む", done: false },
  { id: 3, text: "コードレビュー", done: false },
];

export default function CombinedExample() {
  const [tasks, setTasks] = useState(initialTasks);

  const toggle = (id: number) => {
    setTasks(tasks.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
  };

  const done = tasks.filter((t) => t.done).length;

  return (
    <div className="rounded-lg border border-base-300 p-6 space-y-4 max-w-sm">
      <div>
        <p className="text-xs text-base-content/50">
          {dayjs().format("YYYY年MM月DD日（ddd）")}
        </p>
        <h3 className="text-lg font-bold">今日のタスク</h3>
        <p className="text-sm text-base-content/60">
          {done} / {tasks.length} 完了
        </p>
      </div>
      <div className="space-y-2">
        {tasks.map((task) => (
          <div key={task.id}>
            <label className="flex items-center gap-3 cursor-pointer">
              <input
                type="checkbox"
                className="checkbox checkbox-sm checkbox-primary"
                checked={task.done}
                onChange={() => toggle(task.id)}
              />
              <span
                className={task.done ? "line-through text-base-content/40" : ""}
              >
                {task.text}
              </span>
            </label>
          </div>
        ))}
      </div>
    </div>
  );
}