'use client';

import { useDroppable } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Issue } from '@/lib/api/issues';
import { IssueCard } from './IssueCard';

interface KanbanColumnProps {
  id: string;
  title: string;
  issues: Issue[];
}

export function KanbanColumn({ id, title, issues }: KanbanColumnProps) {
  const { setNodeRef } = useDroppable({ id });

  return (
    <Card>
      <CardHeader className="pb-3">
        <CardTitle className="text-sm font-medium flex items-center justify-between">
          <span>{title}</span>
          <span className="text-muted-foreground">{issues.length}</span>
        </CardTitle>
      </CardHeader>
      <CardContent ref={setNodeRef} className="space-y-2 min-h-[400px]">
        <SortableContext
          items={issues.map((i) => i.id)}
          strategy={verticalListSortingStrategy}
        >
          {issues.map((issue) => (
            <IssueCard key={issue.id} issue={issue} />
          ))}
        </SortableContext>
        {issues.length === 0 && (
          <div className="flex h-32 items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25">
            <p className="text-sm text-muted-foreground">No issues</p>
          </div>
        )}
      </CardContent>
    </Card>
  );
}