// src/components/backlink/planning/planning-column.tsx
"use client";

import { useDroppable } from "@dnd-kit/core";
import type { PlanningCard } from "@/lib/backlink/planning";
import type { BacklinkStatus } from "@/lib/db/domain-schema";
import { PlanningCardItem } from "./planning-card";

export function PlanningColumn({
  status,
  label,
  cards,
  onOpen,
}: {
  status: BacklinkStatus;
  label: string;
  cards: PlanningCard[];
  onOpen: (card: PlanningCard) => void;
}) {
  const { setNodeRef, isOver } = useDroppable({ id: status });
  return (
    <div
      ref={setNodeRef}
      className={`flex min-h-40 w-64 shrink-0 flex-col gap-2 rounded-lg border bg-muted/20 p-2 ${
        isOver ? "ring-1 ring-primary" : ""
      }`}
    >
      <div className="flex items-center justify-between px-1 text-sm">
        <span className="font-medium">{label}</span>
        <span className="text-muted-foreground tabular-nums">
          {cards.length}
        </span>
      </div>
      {cards.map((c) => (
        <PlanningCardItem key={c.backlinkId} card={c} onOpen={onOpen} />
      ))}
    </div>
  );
}