"use client"

import { cn } from "@/lib/utils"

const SIZE_MAP = {
  sm: 16,
  md: 19,
  lg: 19,
} as const

type VerifiedBadgeSize = keyof typeof SIZE_MAP | number

function resolveSize(size: VerifiedBadgeSize) {
  return typeof size === "number" ? size : SIZE_MAP[size]
}

export function VerifiedBadge({
  size = "md",
  className,
  responsive = false,
}: {
  size?: VerifiedBadgeSize
  className?: string
  responsive?: boolean
}) {
  const px = resolveSize(size)

  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-label="Verified"
      className={cn(
        "flex-shrink-0",
        responsive ? "w-[clamp(16px,1.7vw,19px)] h-[clamp(16px,1.7vw,19px)]" : "",
        className
      )}
      style={responsive ? undefined : { width: px, height: px }}
    >
      <path
        d="M12 2l2.39 1.79 2.98.02 1.02 2.8 2.4 1.77-.94 2.83.94 2.83-2.4 1.77-1.02 2.8-2.98.02L12 22l-2.39-1.79-2.98-.02-1.02-2.8-2.4-1.77.94-2.83-.94-2.83 2.4-1.77 1.02-2.8 2.98-.02L12 2z"
        fill="#1472f1"
      />
      <path
        d="M9 12l2 2 4-4"
        stroke="#fff"
        strokeWidth="2.2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

export function VerifiedName({
  name,
  badgeSize = "md",
  className,
  nameClassName,
  compact = false,
}: {
  name: string
  badgeSize?: VerifiedBadgeSize
  className?: string
  nameClassName?: string
  compact?: boolean
}) {
  return (
    <div
      className={cn(
        "flex items-center justify-center gap-1.5 mb-1",
        className
      )}
    >
      <span
        className={cn(
          "font-bold text-black tracking-[-0.2px]",
          compact
            ? "text-[16px]"
            : "text-[clamp(17px,1.6vw,21px)]",
          nameClassName
        )}
        style={{ fontFamily: "'Archivo', sans-serif" }}
      >
        {name}
      </span>
      <VerifiedBadge
        size={badgeSize}
        responsive={!compact}
        className={compact ? "w-4 h-4" : undefined}
      />
    </div>
  )
}