import { clients } from '../consts/clients';

export function Clients() {
  return (
    <div className="space-y-8 select-none">
      <div className="flex items-center overflow-hidden w-screen lg:-mx-10 -mx-6 mt-10 min-h-[117px]">
        <MarqueeHalf items={clients.slice(0, clients.length / 3)} />
        <MarqueeHalf items={clients.slice(0, clients.length / 3)} />
      </div>
      <div className="flex items-center overflow-hidden w-screen lg:-mx-10 -mx-6 min-h-[117px]">
        <MarqueeHalf
          reversed
          items={clients.slice(clients.length / 3, (2 * clients.length) / 3)}
        />
        <MarqueeHalf
          reversed
          items={clients.slice(clients.length / 3, (2 * clients.length) / 3)}
        />
      </div>
      <div className="border-b border-[#3D425C] flex items-center overflow-hidden w-screen lg:-mx-10 -mx-6 min-h-[117px] pb-16">
        <MarqueeHalf items={clients.slice(2 * (clients.length / 3))} />
        <MarqueeHalf items={clients.slice(2 * (clients.length / 3))} />
      </div>
    </div>
  );
}

function MarqueeHalf({
  reversed = false,
  items,
}: {
  items: { src: string }[];
  reversed?: boolean;
}) {
  return (
    <div
      className={
        'flex flex-nowrap ' +
        (reversed
          ? '[animation:infinite-scroll_45s_linear_infinite_reverse]'
          : 'animate-infinite-scroll')
      }
    >
      {items.map(client => (
        <div
          key={client.src}
          className="border-l border-[#3D425C] w-[312px] h-[124px] flex justify-center items-center relative"
        >
          <img
            key={client.src}
            src={client.src}
            alt={client.src}
            className="!relative"
          />
        </div>
      ))}
    </div>
  );
}
