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

export function Clients() {
  return (
    <div
      itemScope
      itemType="http://schema.org/Clients"
      className="select-none grid grid-rows-[repeat(3,124px)] gap-y-[clamp(20px,2vw,32px)] pb-16 border-b border-[#3D425C] lg:-mx-10 sm:-mx-6 -mx-4"
    >
      <div className="flex w-screen overflow-hidden">
        <MarqueeHalf items={clients.slice(0, clients.length / 3)} />
        <MarqueeHalf items={clients.slice(0, clients.length / 3)} />
        <MarqueeHalf items={clients.slice(0, clients.length / 3)} />
      </div>
      <div className="flex w-screen overflow-hidden">
        <MarqueeHalf
          reversed
          items={clients.slice(clients.length / 3, (2 * clients.length) / 3)}
        />
        <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="flex w-screen overflow-hidden">
        <MarqueeHalf items={clients.slice(2 * (clients.length / 3))} />
        <MarqueeHalf items={clients.slice(2 * (clients.length / 3))} />
        <MarqueeHalf items={clients.slice(2 * (clients.length / 3))} />
      </div>
    </div>
  );
}

function MarqueeHalf({
  reversed = false,
  items,
}: {
  items: IClient[];
  reversed?: boolean;
}) {
  return (
    <div
      className={
        'flex flex-nowrap ' +
        (reversed
          ? '[animation:infinite-scroll_10s_linear_infinite_reverse]'
          : 'animate-infinite-scroll')
      }
    >
      {items.map(client => (
        <div
          itemProp={client.title}
          key={client.src}
          className="border-l border-[#3D425C] w-[clamp(200px,19.5vw,312px)] flex justify-center items-center"
        >
          <img
            src={client.src}
            alt={client.title}
            className="scale-50 pointer-events-none select-none"
          />
        </div>
      ))}
    </div>
  );
}
