"use client";

import { m } from "motion/react";

import type { Dictionary } from "@/app/[lang]/dictionaries";

const sources: {
  title: string;
  logo?: string;
  width?: number;
  height?: number;
}[] = [
  { title: "Semrush", logo: "/brands/semrush.webp", width: 1024, height: 633 },
  { title: "Ahrefs", logo: "/brands/ahrefs.svg", width: 1200, height: 1200 },
  { title: "Mangools", logo: "/brands/mangools.svg", width: 807, height: 459 },
  {
    title: "SE Ranking",
    logo: "/brands/se-ranking.svg",
    width: 2331,
    height: 1584,
  },
  {
    title: "Google Search Console",
    logo: "/brands/gsc.svg",
    width: 256,
    height: 228,
  },
];

export const LogoCloud = ({ dict }: { dict: Dictionary["logocloud"] }) => {
  return (
    <section className="pb-10 md:pb-10" aria-labelledby="logocloud-heading">
      <h2
        id="logocloud-heading"
        className="mx-auto max-w-xl text-center text-lg font-medium text-neutral-600 dark:text-neutral-400"
      >
        {dict.title}
        <br className="hidden md:block" />
        <span className="text-neutral-400"> {dict.subtitle}</span>
      </h2>
      <div className="mx-auto mt-10 grid max-w-3xl grid-cols-2 items-center gap-6 md:grid-cols-5">
        {sources.map((source, index) => (
          <m.div
            initial={{ y: -10, opacity: 0, filter: "blur(10px)" }}
            whileInView={{ y: 0, opacity: 1, filter: "blur(0px)" }}
            transition={{ duration: 0.5, ease: "easeOut", delay: index * 0.1 }}
            viewport={{ once: true }}
            key={source.title}
            className="flex h-12 items-center justify-center"
          >
            {source.logo ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img
                src={source.logo}
                alt={source.title}
                width={source.width}
                height={source.height}
                className="h-7 w-auto max-w-[140px] object-contain opacity-80 transition hover:opacity-100"
              />
            ) : (
              <span className="text-center text-sm font-semibold text-neutral-500 opacity-80 transition hover:opacity-100 dark:text-neutral-400">
                {source.title}
              </span>
            )}
          </m.div>
        ))}
      </div>
    </section>
  );
};