import Image from "next/image";
import logoDark from "@/public/logo-dark.png";
import logoLight from "@/public/logo-light.png";
import { cn } from "@/lib/utils";

/**
 * The Podcast Distribution AI wordmark. Two assets ship: a dark logo for light
 * backgrounds and a light logo for dark backgrounds. They are swapped purely
 * with Tailwind `dark:` variants, so on surfaces without a `.dark` ancestor
 * (marketing, auth, admin, public share) the dark logo is always shown — which
 * is exactly where a dark logo is required.
 *
 * `className` controls the height (default `h-7`); width follows automatically.
 * Set `priority` for above-the-fold placements (e.g. site/app headers).
 */
export function Logo({ className, priority = false }: { className?: string; priority?: boolean }) {
  return (
    <>
      <Image
        src={logoDark}
        alt="Podcast Distribution AI"
        priority={priority}
        className={cn("h-7 w-auto dark:hidden", className)}
      />
      <Image
        src={logoLight}
        alt="Podcast Distribution AI"
        priority={priority}
        className={cn("hidden h-7 w-auto dark:block", className)}
      />
    </>
  );
}