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

export function BrandLogo({ collapsed = false }: { collapsed?: boolean }) {
  return (
    <Link to="/" className="flex items-center gap-2 group">
      <div className="relative h-8 w-8 rounded-lg bg-gradient-to-br from-primary to-accent grid place-items-center shadow-[var(--shadow-glow)] transition-transform group-hover:scale-105">
        <svg
          viewBox="0 0 24 24"
          className="h-4 w-4 text-primary-foreground"
          fill="none"
          stroke="currentColor"
          strokeWidth="2.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path d="M3 11l9-8 9 8" />
          <path d="M5 10v10h14V10" />
          <circle cx="12" cy="14" r="2" />
        </svg>
      </div>
      {!collapsed && (
        <div className="leading-tight">
          <div className="text-sm font-semibold tracking-tight">VotersAlert</div>
          <div className="text-[10px] text-muted-foreground uppercase tracking-wider">
            Campaign OS
          </div>
        </div>
      )}
    </Link>
  );
}