import Link from "next/link";
import { Zap } from "lucide-react";
import { cn } from "@/lib/utils";
import { commonTexts } from "@/lib/i18n/common";

/** Blue rounded square with the Zap glyph — the panel logomark. */
export function BrandMark({ className }: { className?: string }) {
  return (
    <span
      className={cn(
        "flex size-9 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-lg shadow-primary/25",
        className,
      )}
    >
      <Zap className="size-5" strokeWidth={2.5} />
    </span>
  );
}

/** Logomark + wordmark, optionally linked. */
export function BrandLogo({
  href = "/",
  className,
  markClassName,
  wordClassName,
}: {
  href?: string | null;
  className?: string;
  markClassName?: string;
  wordClassName?: string;
}) {
  const inner = (
    <>
      <BrandMark className={markClassName} />
      <span
        className={cn(
          "font-display text-lg font-semibold tracking-tight",
          wordClassName,
        )}
      >
        {commonTexts.appName}
      </span>
    </>
  );

  if (!href) {
    return (
      <span className={cn("flex items-center gap-2.5", className)}>{inner}</span>
    );
  }

  return (
    <Link
      href={href}
      className={cn(
        "flex items-center gap-2.5 rounded-lg outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
        className,
      )}
    >
      {inner}
    </Link>
  );
}

export default BrandLogo;