import { useTheme } from '@/context/theme-context';
import { SharedData } from '@/types';
import { getImageUrl } from '@/utils/getImageUrl';
import { usePage } from '@inertiajs/react';

export function AppLogo({
  alwaysDarkLogo = false,
}: {
  alwaysDarkLogo?: boolean;
}) {
  const { branding } = usePage<SharedData>().props;
  const { theme } = useTheme();
  const logo =
    alwaysDarkLogo || theme === 'dark'
      ? branding.branding?.site_dark_logo
      : branding.branding?.site_light_logo;
  const appName = branding.branding?.app_name || 'Predixio';

  return (
    <>
      {logo ? (
        <img
          src={getImageUrl(logo)}
          alt={appName}
          className="h-7 w-auto object-contain"
        />
      ) : (
        <span className="light:text-card-foreground text-xl font-semibold">
          {appName}
        </span>
      )}
    </>
  );
}