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

export function LogoMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 40 40" className={cn("h-10 w-10", className)} aria-hidden>
      <defs>
        <linearGradient id="lg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="var(--primary)" />
          <stop offset="1" stopColor="var(--blush)" />
        </linearGradient>
      </defs>
      <circle cx="20" cy="20" r="19" fill="url(#lg)" />
      <path d="M20 30s-9-5.6-9-12a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6.4-9 12-9 12z" fill="var(--primary-foreground)" />
      <circle cx="20" cy="11" r="2.4" fill="var(--gold)" />
    </svg>
  );
}

export function Logo({ light = false }: { light?: boolean }) {
  return (
    <Link to="/" className="flex items-center gap-2.5" aria-label="CareShare Initiative home">
      <LogoMark />
      <span className="leading-none">
        <span className={cn("block font-display text-xl font-semibold", light ? "text-primary-foreground" : "text-primary-deep")}>CareShare</span>
        <span className={cn("block text-[0.65rem] font-semibold uppercase tracking-[0.25em]", light ? "text-gold" : "text-primary")}>Initiative</span>
      </span>
    </Link>
  );
}