import Link from "next/link";
import { BRAND_NAME } from "@/lib/branding";

type Props = {
  href?: string;
  size?: "sm" | "md";
  /** Small Beta mark at top-right of the wordmark (public marketing surfaces). */
  beta?: boolean;
};

export function Logo({ href = "/", size = "md", beta = false }: Props) {
  const textSize = size === "sm" ? "text-xl" : "text-2xl";
  const betaSize = size === "sm" ? "text-[0.5rem]" : "text-[0.55rem]";

  const content = (
    <span className={`relative inline-flex items-baseline font-bold tracking-tight ${textSize}`}>
      <span className="text-white">Songs</span>
      <span className="text-red-400">2VID</span>
      {beta ? (
        <span
          className={`pointer-events-none absolute left-full top-0 ml-0.5 -translate-y-1/2 ${betaSize} font-bold uppercase tracking-wider text-red-400`}
          aria-hidden="true"
        >
          Beta
        </span>
      ) : null}
    </span>
  );

  const label = beta ? `${BRAND_NAME} Beta` : BRAND_NAME;

  if (href) {
    return (
      <Link href={href} className="inline-flex items-center" aria-label={label}>
        {content}
      </Link>
    );
  }

  return (
    <span className="inline-flex items-center" aria-label={label}>
      {content}
    </span>
  );
}