"use client";
import { BadgeCheck } from "lucide-react";

interface Props {
  size?: "xs" | "sm" | "md" | "lg";
  showLabel?: boolean;
  showTooltip?: boolean;
}

const sizeMap = {
  xs: { icon: 10, text: "text-[9px]", px: "px-1 py-0.5", gap: "gap-0.5" },
  sm: { icon: 12, text: "text-[10px]", px: "px-1.5 py-0.5", gap: "gap-1" },
  md: { icon: 14, text: "text-xs", px: "px-2 py-1", gap: "gap-1.5" },
  lg: { icon: 16, text: "text-sm", px: "px-2.5 py-1.5", gap: "gap-2" },
};

export function VerifiedBadge({ size = "md", showLabel = true, showTooltip = false }: Props) {
  const s = sizeMap[size];
  return (
    <span
      title={showTooltip ? "Verified seller with completed identity verification" : undefined}
      className={`inline-flex items-center ${s.gap} ${s.px} rounded-full font-semibold`}
      style={{
        background: "rgba(240,192,64,0.15)",
        color: "#f0c040",
        border: "1px solid rgba(240,192,64,0.35)",
      }}
    >
      <BadgeCheck size={s.icon} />
      {showLabel && <span className={s.text}>Verified</span>}
    </span>
  );
}