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

type KontiaMarkProps = {
  compact?: boolean;
  variant?: "stacked" | "horizontal";
  className?: string;
};

export function KontiaMark({ compact = false, variant = "stacked", className }: KontiaMarkProps) {
  const iconSizeClass = compact ? "h-7 w-7" : "h-9 w-9";
  const labelClass = compact ? "text-xs" : "text-sm";

  const icon = (
    <svg viewBox="0 0 64 64" className={iconSizeClass} role="img" aria-label="Kontia logo">
      <rect x="8" y="30" width="10" height="18" rx="2" fill="#0f162d" />
      <rect x="23" y="22" width="10" height="26" rx="2" fill="#0f162d" />
      <rect x="38" y="27" width="10" height="21" rx="2" fill="#0f162d" />
      <circle cx="13" cy="12" r="4" fill="#0f162d" />
      <circle cx="31" cy="16" r="4" fill="#0f162d" />
      <circle cx="49" cy="10" r="4" fill="#0f162d" />
      <path d="M13 12 L31 16 L49 10" fill="none" stroke="#0f162d" strokeWidth="3" strokeLinecap="round" />
    </svg>
  );

  if (variant === "horizontal") {
    return (
      <span className={cn("inline-flex items-center gap-2.5", className)}>
        {icon}
        <span className={cn("leading-none font-semibold text-[#0f162d]", compact ? "text-lg" : "text-xl")}>Kontia</span>
      </span>
    );
  }

  return (
    <span className={cn("inline-flex flex-col items-center justify-center leading-none text-[#0f162d]", className)}>
      {icon}
      <span className={cn("mt-0.5 font-semibold", labelClass)}>Kontia</span>
    </span>
  );
}
