"use client";

import Image from "next/image";
import { useBrand } from "@/components/providers/brand-provider";
import { cn } from "@/lib/utils";

type BrandLogoProps = {
  className?: string;
  imageClassName?: string;
  width?: number;
  height?: number;
  showName?: boolean;
  nameClassName?: string;
  collapsed?: boolean;
};

function isApiBrandingAsset(src: string) {
  return src.startsWith("/api/branding/");
}

export function BrandLogo({
  className,
  imageClassName,
  width = 140,
  height = 48,
  showName = false,
  nameClassName,
  collapsed = false,
}: BrandLogoProps) {
  const { brand, logoUrl } = useBrand();

  if (logoUrl) {
    const sizeClass = collapsed ? "h-10 w-10" : "h-auto max-w-full";
    if (isApiBrandingAsset(logoUrl)) {
      return (
        // eslint-disable-next-line @next/next/no-img-element -- served from dynamic upload API
        <img
          src={logoUrl}
          alt={brand.platformName}
          width={collapsed ? 40 : width}
          height={collapsed ? 40 : height}
          className={cn(sizeClass, "object-contain", imageClassName)}
        />
      );
    }

    return (
      <Image
        src={logoUrl}
        alt={brand.platformName}
        width={collapsed ? 40 : width}
        height={collapsed ? 40 : height}
        className={cn(`${sizeClass} object-contain`, imageClassName)}
        priority
      />
    );
  }

  return (
    <div className={cn("min-w-0", className)}>
      <p
        className={cn(
          "font-bold leading-snug text-foreground",
          collapsed ? "text-center text-sm" : "text-[15px]",
          nameClassName
        )}
      >
        {brand.platformName}
      </p>
      {showName && !collapsed ? (
        <p className="text-xs font-medium text-muted-foreground">{brand.companyName}</p>
      ) : null}
    </div>
  );
}