import React from "react";
import Image from "next/image";
import { BrandsResult } from "@/shared/types/brands";
import { useTranslations } from "next-intl";
import Link from "next/link";

interface Props {
  partners: BrandsResult[];
}

const PartnersSection = ({ partners }: Props) => {
  const t = useTranslations("")
  return (
    <section
      id={"partners-section"}
      className={"my-container section-wrapper bg-white rounded-4xl"}
    >
      <div className={"flex flex-col justify-center"}>
        <h1 className="section-title uppercase text-center pb-5">
          {t("Hamkorlarimiz")}
        </h1>
        <div>
          <div
            className={"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4"}
          >
            {partners.map((e, i) => (
              <Link href={`/brand/${e.id}`} key={i} className={"w-full h-full flex items-center justify-center"}>
                <Image
                  src={e.image}
                  alt={"category"}
                  width={150}
                  height={150}
                />
              </Link>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};
export default PartnersSection;
