"use client";

import { createContext, useContext } from "react";
import { Frame } from "lucide-react";
import type { frameDropFeedback } from "@/lib/canvas-frames";
import styles from "./canvas.module.css";

export const FrameFeedback = createContext({ names: new Map<string, string>(), counts: new Map<string, number>(), drops: [] as ReturnType<typeof frameDropFeedback> });

export function MembershipBadge({ id, frameId, selected }: { id: string; frameId?: string; selected: boolean }) {
  const { names, drops } = useContext(FrameFeedback);
  const drop = drops.find((item) => item.id === id);
  const target = drop ? drop.to : frameId;
  const name = target ? names.get(target) : undefined;
  if (!drop && !selected) return null;
  const label = name ? `${drop && drop.to !== drop.from ? "松开加入" : "属于"}：${name}` : drop?.from ? `松开移出：${names.get(drop.from) || "分区"}` : null;
  return label && <div className={styles.membershipBadge} title={label}><Frame size={11} />{label}</div>;
}