// src/components/content/content-column.tsx
"use client";

import { useDroppable } from "@dnd-kit/core";
import type { ContentItem } from "@/lib/content/types";
import { CONTENT_STATUS_LABEL } from "@/lib/content/types";
import type { ContentStatus } from "@/lib/db/domain-schema";
import { ContentCard } from "./content-card";

export function ContentColumn({
  status,
  items,
  nowIso,
  onOpen,
}: {
  status: ContentStatus;
  items: ContentItem[];
  nowIso: string;
  onOpen: (item: ContentItem) => 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">{CONTENT_STATUS_LABEL[status]}</span>
        <span className="text-muted-foreground tabular-nums">
          {items.length}
        </span>
      </div>
      {items.map((it) => (
        <ContentCard key={it.id} item={it} nowIso={nowIso} onOpen={onOpen} />
      ))}
    </div>
  );
}