import type { FC, SVGProps } from "react";
import { Trans } from "@lingui/react/macro";

import AirbusLogo from "~/assets/logos/airbus.svg";
import CouchbaseLogo from "~/assets/logos/couchbase.svg";
import DeloitteLogo from "~/assets/logos/deloitte.svg";
import FastCompanyLogo from "~/assets/logos/fast_company.svg";
import LegoLogo from "~/assets/logos/lego.svg";
import LinkedinLogo from "~/assets/logos/linkedin.svg";
import SanaLogo from "~/assets/logos/sana.svg";
import WakamLogo from "~/assets/logos/wakam.svg";

type LogoComponent = FC<SVGProps<SVGSVGElement>>;

export default function Logos() {
  const logos: {
    id: number;
    component: LogoComponent;
    alt: string;
  }[] = [
    {
      id: 1,
      component: SanaLogo as LogoComponent,
      alt: "Sana Logo",
    },
    {
      id: 2,
      component: FastCompanyLogo as LogoComponent,
      alt: "Fast Company Logo",
    },
    {
      id: 3,
      component: CouchbaseLogo as LogoComponent,
      alt: "Couchbase Logo",
    },
    {
      id: 4,
      component: LegoLogo as LogoComponent,
      alt: "Lego Logo",
    },
    {
      id: 5,
      component: AirbusLogo as LogoComponent,
      alt: "Airbus Logo",
    },
    {
      id: 6,
      component: DeloitteLogo as LogoComponent,
      alt: "Deloitte Logo",
    },
    {
      id: 7,
      component: WakamLogo as LogoComponent,
      alt: "Wakam Logo",
    },
    {
      id: 8,
      component: LinkedinLogo as LogoComponent,
      alt: "Linked In Logo",
    },
  ];

  return (
    <div className="w-full px-4 py-16">
      <div className="mb-8 text-center">
        <p className="text-sm font-medium text-light-800 dark:text-dark-800">
          <Trans>
            Trusted by fast-moving teams
            <br />
            around the world
          </Trans>
        </p>
      </div>

      <div className="relative overflow-hidden">
        <div className="absolute left-0 top-0 z-10 h-full w-8 bg-gradient-to-r from-white/60 to-transparent dark:from-dark-50" />
        <div className="absolute right-0 top-0 z-10 h-full w-8 bg-gradient-to-l from-white/60 to-transparent dark:from-dark-50" />

        <div className="flex animate-scroll" style={{ width: "max-content" }}>
          <div className="flex flex-shrink-0 items-center space-x-12">
            {logos.map((logo) => {
              const LogoComponent: LogoComponent = logo.component;
              return (
                <div
                  key={`first-${logo.id}`}
                  className="flex h-12 w-32 items-center justify-center"
                >
                  <LogoComponent
                    className="text-light-950 transition-all duration-300 hover:text-light-1000 dark:text-dark-950 hover:dark:text-dark-1000"
                    aria-label={logo.alt}
                  />
                </div>
              );
            })}
          </div>

          <div className="ml-12 flex flex-shrink-0 items-center space-x-12">
            {logos.map((logo) => {
              const LogoComponent: LogoComponent = logo.component;
              return (
                <div
                  key={`second-${logo.id}`}
                  className="flex h-12 w-32 items-center justify-center"
                >
                  <LogoComponent
                    className="text-light-950 transition-all duration-300 hover:text-light-1000 dark:text-dark-950 hover:dark:text-dark-1000"
                    aria-label={logo.alt}
                  />
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}