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

export function Logo({ compact = false }: { compact?: boolean }) {
  return (
    <Link to="/" className="group flex items-center gap-2.5">
      <span className="relative inline-flex h-9 w-9 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-soft">
        <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
          <path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H19v15H6.5A2.5 2.5 0 0 0 4 20.5z" />
          <path d="M12 6v9" />
          <path d="M9 17l3-2 3 2" stroke="var(--gold)" />
        </svg>
      </span>
      <span className="flex flex-col leading-none">
        <span className="font-serif text-[1.05rem] font-semibold tracking-tight text-primary">
          Bible Word
        </span>
        {!compact && (
          <span className="font-serif text-[0.78rem] tracking-[0.18em] uppercase text-muted-foreground">
            of the Day
          </span>
        )}
      </span>
    </Link>
  );
}