import React from "react";
import { Link } from "@/shared/config/i18n/navigation";
import {
  BlocksIcon,
  BookMarkedIcon,
  BoxesIcon,
  HandshakeIcon,
} from "lucide-react";
import { useTranslations } from "next-intl";

const SectionsSection = () => {
  const t = useTranslations("");
  return (
    <div className={"my-container section-wrapper"}>
      <div className={"grid grid-cols-4 max-md:grid-cols-2 gap-6 max-sm:gap-4"}>
        <Link href={"/category"} className={"block w-full"}>
          <div
            className={"bg-white p-12 w-full flex flex-col items-center gap-2"}
          >
            <BlocksIcon strokeWidth={1} size={64} className={"text-primary"} />
            <h1 className={"text-xl font-bold text-center"}>{t("Katalog")}</h1>
          </div>
        </Link>

        <Link href={"/services"} className={"block w-full"}>
          <div
            className={"bg-white p-12 w-full flex flex-col items-center gap-2"}
          >
            <BoxesIcon strokeWidth={1} size={64} className={"text-primary"} />
            <h1 className={"text-xl font-bold text-center"}>
              {t("Xizmatlar")}
            </h1>
          </div>
        </Link>

        <Link href={"/partners"} className={"block w-full"}>
          <div
            className={"bg-white p-12 w-full flex flex-col items-center gap-2"}
          >
            <HandshakeIcon
              strokeWidth={1}
              size={64}
              className={"text-primary"}
            />
            <h1 className={"text-xl font-bold text-center"}>
              {t("Hamkorlik")}
            </h1>
          </div>
        </Link>

        <Link href={"/useful"} className={"block w-full"}>
          <div
            className={"bg-white p-12 w-full flex flex-col items-center gap-2"}
          >
            <BookMarkedIcon
              strokeWidth={1}
              size={64}
              className={"text-primary"}
            />
            <h1 className={"text-xl font-bold text-center"}>{t("Foydali")}</h1>
          </div>
        </Link>
      </div>
    </div>
  );
};
export default SectionsSection;
