import Link from "next/link";

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

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

  const content = (
    <span className={`inline-flex items-baseline font-bold tracking-tight ${textSize}`}>
      <span className="text-white">Songs</span>
      <span className="text-red-400">2YT</span>
    </span>
  );

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

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