import Image from "next/image";
import { cn } from "@/lib/utils";

type LogoStripProps = {
  className?: string;
  inverse?: boolean;
};

const WHITE_FILTER = { filter: "brightness(0) invert(1)" };

/**
 * Chrome logo strip. Default: Flat101 + Indra co-branding.
 * Replace the <Image> tags or remove this component if your project has different partners.
 *
 * Required assets:
 *   public/logos/flat101.svg   (currentColor-aware)
 *   public/logos/indra.png
 */
export function LogoStrip({ className, inverse = false }: LogoStripProps) {
  return (
    <div
      className={cn(
        "inline-flex items-center gap-4 sm:gap-[18px]",
        inverse && "[&_.lbl]:text-white/70 [&_.sep]:bg-white/30",
        className,
      )}
    >
      <Image
        src="/logos/flat101.svg"
        alt="Flat101"
        width={83}
        height={22}
        className="h-[18px] w-auto sm:h-[22px]"
        style={inverse ? WHITE_FILTER : undefined}
        priority
      />
      <span className="sep h-5 w-px bg-ink-300" />
      <Image
        src="/logos/indra.png"
        alt="Indra"
        width={43}
        height={14}
        className="h-[12px] w-auto sm:h-[14px]"
        style={inverse ? WHITE_FILTER : { opacity: 0.85 }}
      />
    </div>
  );
}