---
import type { LogoItem } from '../../data/about/logos';

interface Props {
  logos: LogoItem[];
  desktopContainerClass?: string;
  mobileContainerClass?: string;
  desktopImgClass: string;
  mobileImgClass: string;
}

const {
  logos,
  desktopContainerClass = "hidden md:flex w-full items-center justify-between gap-6 py-4",
  mobileContainerClass = "md:hidden w-full overflow-hidden py-3 relative",
  desktopImgClass,
  mobileImgClass
} = Astro.props;
---
<!-- Desktop view (static grid with hover interactions, transparent, grayscale-to-active transitions) -->
<div class={desktopContainerClass}>
  {logos.map((logo) => (
    <a href={logo.href} target="_blank" rel="noopener noreferrer" class={`flex items-center justify-center transition-all duration-300 hover:scale-105 shrink-0 ${logo.desktopWidthClass} h-12`}>
      <img src={logo.src} alt={logo.alt} class={`object-contain ${desktopImgClass} transition-all duration-500 cursor-pointer`} style={`height: ${logo.desktopHeight}`} />
    </a>
  ))}
</div>

<!-- Mobile-only view (Endless scrolling marquee, transparent) -->
<div class={mobileContainerClass}>
  <!-- Fade gradients on left & right of marquee -->
  <div class="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-paper to-transparent z-10 pointer-events-none"></div>
  <div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-paper to-transparent z-10 pointer-events-none"></div>
  
  <div class="flex gap-12 animate-marquee whitespace-nowrap w-max items-center">
    {logos.map((logo) => (
      <img src={logo.src} alt={logo.alt} class={`object-contain ${mobileImgClass}`} style={`height: ${logo.mobileHeight}`} />
    ))}
    
    <!-- Loop duplicates for endless loop -->
    {logos.map((logo) => (
      <img src={logo.src} alt={logo.alt} class={`object-contain ${mobileImgClass}`} style={`height: ${logo.mobileHeight}`} />
    ))}
  </div>
</div>