---
import ScrollRail from '@@/components/ui/ScrollRail.astro';

interface Props {
  title?: string;
  logos?: Array<{
    name: string;
    src?: string;
    width?: string;
    height?: string;
  }>;
  animationDuration?: string;
  gap?: string;
}

const {
  title = 'Trusted by leading companies',
  logos = [
    {
      name: 'Logo 1',
      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-132x53_0442ae34-055f-4801-98d6-0c1e0a0427b7.svg',
      width: '132px',
      height: '53px',
    },
    {
      name: 'Logo 2',
      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-135x31_692339a2-5fff-4bd6-bd1f-309e5697ff07.svg',
      width: '135px',
      height: '31px',
    },
    {
      name: 'Logo 3',
      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-78x59_fc50848e-eb55-4ec4-aeb7-0ad68a186f3b.svg',
      width: '78px',
      height: '59px',
    },
    {
      name: 'Logo 4',
      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-135x31_93dda93a-62c6-4aec-ba0a-6ba6285958da.svg',
      width: '135px',
      height: '31px',
    },
    {
      name: 'Logo 5',
      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-135x31_b85bd8d6-7b56-4343-9101-cdbafed6993a.svg',
      width: '135px',
      height: '31px',
    },
    {
      name: 'Logo 6',
      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-78x59_b95207a4-f41c-4be9-98cc-0dcda004c65e.svg',
      width: '78px',
      height: '59px',
    },
  ],
  animationDuration = '30s',
  gap = '80px',
} = Astro.props;
---

<div class="logo-cloud w-full py-12">
  <div class="container">
    <p class="text-fg-sub mb-8 text-center text-sm font-medium tracking-wider">
      {title}
    </p>
    <ScrollRail
      autoScroll={true}
      duration={animationDuration}
      gap={gap}
      class="items-center"
      useMask={true}
    >
      {
        logos.map((logo) => (
          <div class="flex flex-shrink-0 items-center justify-center">
            {logo.src ? (
              <img
                src={logo.src}
                alt={logo.name}
                width={logo.width || "120"}
                height={logo.height || "40"}
                class="h-auto opacity-60 grayscale transition-all hover:opacity-100 hover:grayscale-0"
                style={`width: ${logo.width || "120px"}; height: ${logo.height || "40px"}; object-fit: contain;`}
              />
            ) : (
              <div
                class="text-fg-sub flex items-center justify-center text-lg font-semibold opacity-60 transition-opacity hover:opacity-100"
                style={`width: ${logo.width || "120px"}; height: ${logo.height || "40px"};`}
              >
                {logo.name}
              </div>
            )}
          </div>
        ))
      }
    </ScrollRail>
  </div>
</div>