"use client";

import { useTheme } from "next-themes";
import { NotebookPen } from "lucide-react";

import { getGroupColor } from "@/lib/colors";
import { cn } from "@/lib/utils";
import type { GroupDTO } from "@/types/board";

/**
 * Purely presentational stand-in rendered inside <DragOverlay>. The real
 * GroupCard stays mounted (and wired to useSortable) at its slot while
 * dragging; re-mounting that same interactive component a second time here
 * would register a second useSortable/useDraggable for the same id.
 */
export function GroupCardOverlay({ group }: { group: GroupDTO }) {
  const { resolvedTheme } = useTheme();
  const color = getGroupColor(group.color);
  const isDark = resolvedTheme === "dark";
  const borderColor = isDark ? color.dark : color.light;
  const backgroundColor = isDark
    ? `color-mix(in srgb, ${color.dark} 18%, var(--card))`
    : `color-mix(in srgb, ${color.light} 12%, var(--card))`;

  return (
    <div
      style={{ borderColor, backgroundColor }}
      className={cn("rotate-1 scale-105 cursor-grabbing rounded-xl border-[3px] p-3 shadow-lg")}
    >
      <div className="flex items-center justify-between gap-1">
        <h3 className="min-w-0 flex-1 truncate pt-1 text-sm font-semibold">{group.title}</h3>
        <NotebookPen className="size-4 shrink-0 text-muted-foreground" />
      </div>
      <p className="mt-1 text-xs text-muted-foreground">
        {group.todos.length} to-do{group.todos.length === 1 ? "" : "s"}
      </p>
    </div>
  );
}