import { useDroppable } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { ListWithCards, Card as CardType } from '../../types/kanban';
import { KanbanCard } from './KanbanCard';

interface KanbanColumnProps {
  list: ListWithCards;
  cards: CardType[];
  onCardClick: (card: CardType) => void;
}

export function KanbanColumn({ list, cards, onCardClick }: KanbanColumnProps) {
  const { setNodeRef, isOver } = useDroppable({
    id: list.id.toString(),
  });

  return (
    <div className="bg-gray-800 rounded-lg p-4 min-w-[300px] max-w-[300px] border border-gray-700">
      <h2 className="text-white font-bold text-lg mb-4 flex items-center justify-between">
        {list.name}
        <span className="bg-gray-600 text-gray-300 text-xs px-2 py-1 rounded-full">
          {cards.length}
        </span>
      </h2>

      <SortableContext
        id={list.id.toString()}
        items={cards.map((card) => card.id.toString())}
        strategy={verticalListSortingStrategy}
      >
        <div
          ref={setNodeRef}
          className={`min-h-[200px] transition-colors ${isOver ? 'bg-gray-750' : ''}`}
        >
          {cards.map((card) => (
            <KanbanCard key={card.id} card={card} onClick={() => onCardClick(card)} />
          ))}
        </div>
      </SortableContext>
    </div>
  );
}