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

export function BrandMark({ size = "md", className }: { size?: "sm" | "md"; className?: string }) {
  const iconSize = size === "sm" ? 14 : 17;
  return (
    <span
      className={cn("brand-mark", size === "sm" && "brand-mark-sm", className)}
      aria-hidden="true"
    >
      <svg
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        width={iconSize}
        height={iconSize}
        fill="currentColor"
      >
        <polygon points="12,2 1,12 23,12" />
        <rect x="3.5" y="11" width="17" height="12" />
        <rect x="9.5" y="16" width="5" height="7" rx="1" style={{ fill: "var(--ink)" }} />
      </svg>
    </span>
  );
}

export function BrandWordmark({ className }: { className?: string }) {
  return (
    <span className={cn("brand", className)}>
      <BrandMark />
      <span className="brand-name">famapp</span>
    </span>
  );
}