'use client';

import { KanbanColumn } from './KanbanColumn';
import type { KanbanBoard as KanbanBoardType } from '@/types/kanban';

interface KanbanBoardProps {
  board: KanbanBoardType;
}

export function KanbanBoard({ board }: KanbanBoardProps) {
  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-bold">{board.projectName}</h2>
        <p className="text-sm text-muted-foreground">
          Total tasks: {board.columns.reduce((acc, col) => acc + col.tasks.length, 0)}
        </p>
      </div>
      <div className="flex gap-4 overflow-x-auto pb-4">
        {board.columns.map((column) => (
          <KanbanColumn key={column.status} column={column} />
        ))}
      </div>
      <p className="text-xs text-muted-foreground">
        Note: Drag-and-drop functionality will be implemented in Sprint 2
      </p>
    </div>
  );
}