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

import { useDraggable } from "@dnd-kit/core";
import { CSS } from "@dnd-kit/utilities";
import { Badge } from "@/components/ui/badge";
import type { PlanningCard } from "@/lib/backlink/planning";
import { DrBadge } from "../dr-badge";

export function PlanningCardItem({
  card,
  onOpen,
}: {
  card: PlanningCard;
  onOpen: (card: PlanningCard) => void;
}) {
  const { attributes, listeners, setNodeRef, transform, isDragging } =
    useDraggable({ id: card.backlinkId });
  return (
    <button
      type="button"
      ref={setNodeRef}
      {...listeners}
      {...attributes}
      onClick={() => onOpen(card)}
      style={{ transform: CSS.Translate.toString(transform) }}
      className={`w-full rounded-md border bg-card p-3 text-left text-sm shadow-sm ${
        isDragging ? "opacity-50" : ""
      }`}
    >
      <div className="truncate font-medium">{card.source.platform}</div>
      <div className="truncate text-muted-foreground text-xs">
        {card.source.domainNorm}
      </div>
      <div className="mt-2 flex items-center gap-2">
        <DrBadge value={card.source.dr ?? card.source.da} />
        <span className="text-xs tabular-nums">{card.score.toFixed(1)}</span>
        {card.alert ? (
          <Badge variant="destructive">⚠️ {card.footprint}</Badge>
        ) : null}
        {card.toxic ? (
          <Badge variant="destructive" aria-label="toxic">
            ☠️
          </Badge>
        ) : null}
      </div>
    </button>
  );
}