import { Link } from "@tanstack/react-router";
import { cn } from "@/lib/utils";

export function Mark({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 36 36"
      className={cn("size-7 shrink-0", className)}
      aria-hidden="true"
      fill="none"
    >
      <rect
        x="3.5"
        y="3.5"
        width="29"
        height="29"
        stroke="currentColor"
        strokeWidth="1.2"
      />
      <line
        x1="18"
        y1="3.5"
        x2="18"
        y2="32.5"
        stroke="currentColor"
        strokeWidth="1.2"
      />
      <line
        x1="3.5"
        y1="21"
        x2="32.5"
        y2="21"
        stroke="currentColor"
        strokeWidth="1.2"
      />
      <circle cx="18" cy="21" r="1.7" fill="currentColor" />
    </svg>
  );
}

export function Logo({
  tone = "light",
  compact = false,
}: {
  tone?: "light" | "dark";
  compact?: boolean;
}) {
  return (
    <Link
      to="/"
      className={cn(
        "group flex items-center gap-3 no-underline",
        tone === "light" ? "text-fg" : "text-ink-fg",
      )}
      aria-label="Daciora Consulting, home"
    >
      <Mark />
      <span className="flex flex-col leading-none">
        <span className="font-sans text-[0.95rem] font-semibold tracking-[0.22em] uppercase">
          Daciora
        </span>
        {!compact && (
          <span
            className={cn(
              "mt-1 text-[0.62rem] font-medium tracking-[0.28em] uppercase",
              tone === "light" ? "text-muted" : "text-ink-muted",
            )}
          >
            Consulting
          </span>
        )}
      </span>
    </Link>
  );
}
