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

export function CandleMark({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      className={cn("size-5 shrink-0", className)}
      aria-hidden="true"
      fill="none"
    >
      <path
        d="M12 3.2c.7 1.4 1.2 2.4 1.2 3.4 0 1.2-.9 2-1.2 2-.3 0-1.2-.8-1.2-2 0-1 .5-2 1.2-3.4Z"
        fill="currentColor"
      />
      <rect x="10.35" y="8.4" width="3.3" height="11.2" rx="0.4" fill="currentColor" />
      <path d="M8.2 20.2h7.6" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square" />
    </svg>
  );
}

export function Logo({ className }: { className?: string }) {
  return (
    <Link
      to="/"
      aria-label="Perlas Foundation home"
      className={cn(
        "flex items-center gap-2.5 text-fg transition-opacity duration-[var(--motion-fast)] hover:opacity-80",
        className,
      )}
    >
      <CandleMark className="size-[18px]" />
      <span className="font-display text-[15px] font-semibold tracking-logo sm:text-[17px]">
        PERLAS
      </span>
    </Link>
  );
}