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

export function BrandMark({ className, size = 28 }: { className?: string; size?: number }) {

  return (

    <svg

      width={size}

      height={size}

      viewBox="0 0 32 32"

      fill="none"

      className={cn("text-[var(--color-accent-teal)]", className)}

      aria-hidden

    >

      <circle cx="16" cy="16" r="13" stroke="currentColor" strokeOpacity="0.25" strokeWidth="1.5" />

      <circle cx="16" cy="16" r="7.5" stroke="currentColor" strokeOpacity="0.35" strokeWidth="1.5" />

      <path

        d="M16 6c3.4 4.1 5.2 7.2 5.2 9.8A5.2 5.2 0 1 1 10.8 15.8C10.8 13.2 12.6 10.1 16 6Z"

        fill="currentColor"

      />

      <path d="M16 16 L27 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeOpacity="0.6" />

    </svg>

  );

}

export function Wordmark({ collapsed = false }: { collapsed?: boolean }) {

  return (

    <span className="flex items-center gap-2.5">

      <BrandMark />

      {!collapsed ? (

        <span className="text-base font-semibold tracking-[var(--tracking-tight)] text-[var(--color-fg-primary)]">

          Drop<span className="text-[var(--color-accent-teal)]">Hawk</span>

        </span>

      ) : null}

    </span>

  );

}