import * as React from 'react';
import { ImageWithFallback } from '../../figma/ImageWithFallback';
import { cn } from '../../shared/utils';

export interface LogoCloudLogo {
  src: string;
  alt: string;
}

export interface LogoCloudProps extends React.HTMLAttributes<HTMLDivElement> {
  title?: string;
  logos: LogoCloudLogo[];
}

/**
 * A "trusted by" row of partner or customer logos.
 *
 * @description
 * Renders an optional centered, small uppercase muted title above a
 * responsive, wrapping row of grayscale logos that colorize on hover.
 *
 * @ai-rules
 * 1. Provide `logos` as an array of `{ src, alt }` — each is rendered with `ImageWithFallback`.
 * 2. `title` is optional; omit it to render the logo row alone.
 * 3. Logos are token-driven (grayscale/opacity via utilities) so they stay legible across all themes and dark mode.
 */
export function LogoCloud({ title, logos, className, ...props }: LogoCloudProps) {
  return (
    <div className={cn('w-full text-center', className)} {...props}>
      {title && (
        <p className="mb-6 text-xs font-medium uppercase tracking-wider text-muted-foreground sm:mb-8">
          {title}
        </p>
      )}
      <div className="flex flex-wrap items-center justify-center gap-8 md:gap-12">
        {logos.map((logo, index) => (
          <ImageWithFallback
            key={`${logo.alt}-${index}`}
            src={logo.src}
            alt={logo.alt}
            className="h-6 w-auto object-contain grayscale opacity-60 transition-all hover:opacity-100 hover:grayscale-0 md:h-8"
          />
        ))}
      </div>
    </div>
  );
}