export type LogoItem = {
  alt: string;
  imageUrl: string;
  href: string;
};

export type LogosProps = {
  title: string;
  logos: LogoItem[];
  height: string;
  grayscale: boolean;
  padding: string;
};

export default function LogosSection({
  title,
  logos,
  height,
  grayscale,
  padding,
}: LogosProps) {
  return (
    <div style={{ padding }}>
      {title && (
        <p className="mb-8 text-center text-sm font-medium tracking-widest text-muted-foreground uppercase">
          {title}
        </p>
      )}
      <div className="flex flex-wrap items-center justify-center gap-8">
        {logos.map((logo, i) => {
          const img = (
            <img
              src={logo.imageUrl}
              alt={logo.alt}
              style={{
                height,
                filter: grayscale ? 'grayscale(100%)' : 'none',
                opacity: grayscale ? 0.6 : 1,
              }}
              className="object-contain transition-all duration-300 hover:opacity-100 hover:filter-none"
            />
          );
          return logo.href ? (
            <a
              key={i}
              href={logo.href}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center"
            >
              {img}
            </a>
          ) : (
            <div key={i} className="flex items-center">
              {img}
            </div>
          );
        })}
      </div>
    </div>
  );
}