"use client";
import { useState } from "react";
import Column from "./Column";

export default function Board() {
  const [tasks, setTasks] = useState([
    { id: 1, title: "Task 1", description: "Do something", status: "Todo", dueDate: "2026-08-10", topic: "Lab" },
    { id: 2, title: "Task 2", description: "Another thing", status: "In-Progress", dueDate: "2026-08-12", topic: "Project" },
  ]);

  const handleStatusChange = (taskId: number, newStatus: "Todo" | "In-Progress" | "Complete") => {
    setTasks(prev =>
      prev.map(t => (t.id === taskId ? { ...t, status: newStatus } : t))
    );
  };

  return (
    <div style={{ display: "flex", gap: "20px" }}>
      <Column
        title="Todo"
        tasks={tasks.filter(t => t.status === "Todo")}
        onStatusChange={handleStatusChange}
      />
      <Column
        title="In-Progress"
        tasks={tasks.filter(t => t.status === "In-Progress")}
        onStatusChange={handleStatusChange}
      />
      <Column
        title="Complete"
        tasks={tasks.filter(t => t.status === "Complete")}
        onStatusChange={handleStatusChange}
      />
    </div>
  );
}