"use client";

import { BadgeTip } from "./BadgeTip";

import * as Icons from "lucide-react";
import type { Badge } from "@/lib/types";
import clsx from "clsx";

/** Renders a person's badges as gradient pills with a tooltip. */
export function BadgeChips({
  badges,
  size = "md",
}: {
  badges?: Badge[];
  size?: "sm" | "md";
}) {
  if (!badges?.length) return null;

  return (
    <span className="bdg-row">
      {badges.map((b) => {
        // Icons are stored by name so admins can pick any lucide glyph.
        const Icon =
          (Icons as unknown as Record<string, Icons.LucideIcon>)[b.icon] ??
          Icons.Star;

        return (
          // What it means, on hover — a mark beside a name is only useful
          // if people can find out what it stands for.
          <BadgeTip
            key={b.id}
            title={b.name || "Badge"}
            detail={b.description}
          >
          <span
            key={b.id}
            className={clsx(
              "bdg",
              size === "sm" && "bdg-sm",
              b.plain && "bdg-plain",
              !b.name && "bdg-icon"
            )}
            style={
              b.plain
                ? { color: b.color }
                : {
                    background: `linear-gradient(135deg, ${b.color}, ${b.color2 ?? b.color})`,
                  }
            }
          >
            <Icon size={size === "sm" ? 11 : 13} />
            {size === "sm" || !b.name ? null : b.name}
          </span>
          </BadgeTip>
        );
      })}
    </span>
  );
}