import { useCompanyLogo, FALLBACK_LOGO } from "@/hooks/use-company-logo";

interface CompanyLogoProps {
  className?: string;
  alt?: string;
  /** Fixed pixel size (square). Overrides className width/height. */
  size?: number;
  /** Fallback URL when settings are still loading or missing. */
  fallback?: string;
}

/**
 * Renders the dynamic company logo from business_settings.company_logo_url.
 * Falls back to the bundled default if not configured.
 */
export function CompanyLogo({ className, alt = "Company Logo", size, fallback = FALLBACK_LOGO }: CompanyLogoProps) {
  const { logoUrl } = useCompanyLogo();
  const src = logoUrl || fallback;
  const style = size ? { width: size, height: size } : undefined;
  return (
    <img
      src={src}
      alt={alt}
      style={style}
      className={className}
      onError={(e) => {
        const t = e.currentTarget as HTMLImageElement;
        if (t.src !== fallback) t.src = fallback;
      }}
    />
  );
}
