"use client";

import Image from "next/image";
import { useTheme } from "next-themes";
import { useSyncExternalStore } from "react";

const emptySubscribe = () => () => {};

function useMounted() {
  return useSyncExternalStore(
    emptySubscribe,
    () => true,
    () => false,
  );
}

export function Logo({
  className,
  height = 48,
}: {
  className?: string;
  height?: number;
}) {
  const { resolvedTheme } = useTheme();
  const mounted = useMounted();

  // Aspect ratio from the original images: 480x200 = 2.4:1
  const width = Math.round(height * 2.4);

  // Before mount, show the dark logo (works on both themes as a fallback)
  const isDark = mounted ? resolvedTheme === "dark" : false;

  return (
    <Image
      src={isDark ? "/logo_light.png" : "/logo_dark.png"}
      alt="Prabhupāda Says"
      width={width}
      height={height}
      className={className}
      priority
    />
  );
}