import { Link } from "@tanstack/react-router";
import instituto from "@/assets/instituto-vida-segura.png.asset.json";
import institutoMark from "@/assets/instituto-mark.png.asset.json";

export function Logo({ compact = false }: { compact?: boolean }) {
  return (
    <Link
      to="/"
      className="group relative flex items-center gap-3 rounded-xl p-2 transition-all duration-300 hover:scale-[1.02]"
      aria-label="Instituto Vida Segura"
    >
      <span className="absolute inset-0 rounded-xl bg-gradient-to-br from-[color:var(--life)]/15 via-[color:var(--mind-b)]/10 to-[color:var(--safe)]/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
      <span className="absolute inset-0 rounded-xl ring-1 ring-inset ring-[color:var(--life)]/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
      <img
        src={compact ? institutoMark.url : instituto.url}
        alt="Instituto Vida Segura"
        className={compact ? "relative h-11 w-auto sm:h-12" : "relative h-11 w-auto sm:h-12 lg:h-14"}
        loading="eager"
        decoding="async"
      />
    </Link>
  );
}