import * as React from "react";
import Link from "next/link";
import { cn } from "@/lib/utils";

/** Abstract mark: request → route → response. Three nodes, one path. */
export function LogoMark({ className, size = 22 }: { className?: string; size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={cn("shrink-0", className)} aria-hidden>
      <rect x="1" y="1" width="22" height="22" rx="6" className="fill-fg" />
      <path d="M6 12h4.5m0 0 3-4.5H18m-7.5 4.5 3 4.5H18" className="stroke-bg" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx="6" cy="12" r="1.6" className="fill-accent" />
    </svg>
  );
}

export function Logo({ className, href = "/", size = "md" }: { className?: string; href?: string | null; size?: "sm" | "md" | "lg" }) {
  const inner = (
    <span className={cn("inline-flex items-center gap-2 font-semibold tracking-[-0.03em] text-fg", size === "sm" && "text-[15px]", size === "md" && "text-[17px]", size === "lg" && "text-[22px]", className)}>
      <LogoMark size={size === "lg" ? 28 : size === "sm" ? 20 : 22} />
      fetcha
    </span>
  );
  if (!href) return inner;
  return (
    <Link href={href} className="rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40" aria-label="Fetcha home">
      {inner}
    </Link>
  );
}