Tasks

import { useState } from 'react';
import { KanbanBoard, KanbanList, TaskRoadmap, ProgressBar, ProgressCircle } from '@cleen/cleen-components';
import { useTasks } from '@/hooks/useTasks';

export function TaskBoard({ projectId }) {
  const [view, setView] = useState('kanban'); // kanban | list | roadmap
  const { columns, tasks, move, progress } = useTasks(projectId);

  return (
    <div className="task-board">
      <header className="task-board-head">
        <h1>Tasks</h1>
        <ProgressCircle value={progress.percent} />
      </header>

      {view === 'kanban'  && <KanbanBoard columns={columns} onMove={move} />}
      {view === 'list'    && <KanbanList tasks={tasks} />}
      {view === 'roadmap' && <TaskRoadmap tasks={tasks} />}

      <footer>
        <ProgressBar value={progress.percent} max={100} label={`${progress.done}/${progress.total} done`} />
      </footer>
    </div>
  );
}