songs2vid/components/Logo.tsx

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

type Props = {
  href?: string;
  size?: "sm" | "md" | "lg";
};

export function Logo({ href = "/", size = "md" }: Props) {
  const textSize = size === "sm" ? "text-xl" : size === "lg" ? "text-3xl" : "text-2xl";

  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>
    </span>
  );

  const label = 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>
  );
}