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

type MarkVariant = "header" | "sidebar" | "public" | "hero" | "footer";

const VARIANT: Record<MarkVariant, string> = {
  header: "cfl-logo cfl-logo-header",
  sidebar: "cfl-logo cfl-logo-sidebar",
  public: "cfl-logo cfl-logo-public",
  hero: "cfl-logo cfl-logo-hero",
  footer: "cfl-logo cfl-logo-footer",
};

export function CflMark({
  className,
  variant = "header",
}: {
  className?: string;
  variant?: MarkVariant;
}) {
  return (
    <img
      src="/cfl-logo.png"
      alt="Capital Forge League"
      className={cn(VARIANT[variant], className)}
    />
  );
}

export function CflWordmark({
  className,
  kicker = "League portal",
}: {
  className?: string;
  kicker?: string;
}) {
  return (
    <Link
      to="/"
      className={cn("block min-w-0", className)}
      aria-label="Capital Forge League home"
    >
      <CflMark variant="sidebar" />
      <p className="mt-2 text-center text-[10px] font-medium tracking-[0.16em] text-sidebar-muted uppercase">
        {kicker}
      </p>
    </Link>
  );
}