import Link from "next/link";

import { cn } from "@/lib/utils";

type LogoProps = {
  className?: string;
  showTagline?: boolean;
  size?: "sm" | "md" | "lg";
  variant?: "dark" | "light";
};

const sizeClasses = {
  sm: { rule: "w-8", word: "text-xl tracking-[0.22em]", tag: "text-[10px]" },
  md: { rule: "w-10", word: "text-2xl tracking-[0.24em]", tag: "text-xs" },
  lg: { rule: "w-14", word: "text-4xl tracking-[0.26em]", tag: "text-sm" },
};

export function Logo({
  className,
  showTagline = false,
  size = "md",
  variant = "light",
}: LogoProps) {
  const s = sizeClasses[size];
  const isDark = variant === "dark";

  return (
    <Link href="/landing" className={cn("group inline-flex flex-col gap-1", className)}>
      <span
        className={cn(
          "h-0.5 rounded-full transition-colors",
          s.rule,
          isDark
            ? "bg-[hsl(var(--hero-foreground))] group-hover:bg-[hsl(var(--matter))]"
            : "bg-foreground group-hover:bg-primary",
        )}
        aria-hidden
      />
      <span
        className={cn(
          "font-display font-extrabold leading-none",
          s.word,
          isDark ? "text-[hsl(var(--hero-foreground))]" : "text-foreground",
        )}
      >
        SBMTR
      </span>
      {showTagline ? (
        <span
          className={cn(
            "font-marketing",
            s.tag,
            isDark ? "text-[hsl(var(--hero-muted))]" : "text-muted-foreground",
          )}
        >
          Submatter
        </span>
      ) : null}
    </Link>
  );
}