Todo, kanban and notes

import { useState } from "react";
import { COLUMNS, COLUMN_LABEL, newId, type Column, type Task } from "../types";

type Props = { tasks: Task[]; setTasks: (next: Task[] | ((prev: Task[]) => Task[])) => void };

export function Board({ tasks, setTasks }: Props) {
  const [dragging, setDragging] = useState<string | null>(null);
  const move = (id: string, column: Column) => setTasks((prev) => prev.map((t) => (t.id === id ? { ...t, column } : t)));
  const addTo = (column: Column) => {
    const title = window.prompt("Task title");
    if (title?.trim()) setTasks((prev) => [...prev, { id: newId(), title: title.trim(), column, createdAt: Date.now() }]);
  };

  return (
    <div className="grid gap-4 md:grid-cols-3">
      {COLUMNS.map((col) => (
        <section
          key={col}
          aria-labelledby={"col-" + col}
          onDragOver={(e) => e.preventDefault()}
          onDrop={() => {
            if (dragging) move(dragging, col);
            setDragging(null);
          }}
          className="flex min-h-48 flex-col rounded-xl border border-slate-200 bg-white p-3"
        >
          <div className="flex items-center justify-between">
            <h2 id={"col-" + col} className="text-sm font-medium">
              {COLUMN_LABEL[col]} <span className="text-slate-400">{tasks.filter((t) => t.column === col).length}</span>
            </h2>
            <button type="button" onClick={() => addTo(col)} className="text-xs text-blue-600 hover:underline">
              + Add
            </button>
          </div>
          <ul className="mt-3 flex-1 space-y-2">
            {tasks
              .filter((t) => t.column === col)
              .map((t) => {
                const i = COLUMNS.indexOf(col);
                return (
                  <li key={t.id} draggable onDragStart={() => setDragging(t.id)} onDragEnd={() => setDragging(null)} className="cursor-grab rounded-lg border border-slate-200 bg-slate-50 p-3 text-sm active:cursor-grabbing">
                    <p>{t.title}</p>
                    <div className="mt-2 flex justify-between">
                      <button type="button" disabled={i === 0} onClick={() => move(t.id, COLUMNS[i - 1] ?? col)} className="text-xs text-slate-500 disabled:opacity-30" aria-label={"Move " + t.title + " to " + (COLUMN_LABEL[COLUMNS[i - 1] ?? col])}>
                        ← Back
                      </button>
                      <button type="button" disabled={i === COLUMNS.length - 1} onClick={() => move(t.id, COLUMNS[i + 1] ?? col)} className="text-xs text-slate-500 disabled:opacity-30" aria-label={"Move " + t.title + " to " + (COLUMN_LABEL[COLUMNS[i + 1] ?? col])}>
                        Forward →
                      </button>
                    </div>
                  </li>
                );
              })}
          </ul>
        </section>
      ))}
    </div>
  );
}