import React from 'react'
import {Button} from "@/shared/ui/button";
import ProductCard from "@/shared/ui/product-card";
import { useTranslations } from 'next-intl';


const InvertorSection = () => {
  const t = useTranslations("")
  return (
      <section id={"invertor-section"} className={"my-container section-wrapper"}>
        <div className={"flex flex-col justify-center"}>
          <h1 className="section-title uppercase text-center pb-5">{t("Quyosh panellari")}</h1>
          <div>
            <div className={"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"}>
              <ProductCard/>
              <ProductCard/>
              <ProductCard/>
              <ProductCard/>
              <ProductCard/>
              <ProductCard/>
              <ProductCard/>
              <ProductCard/>
            </div>
          </div>
          <Button className={"mx-auto mt-10 px-16"}>
            {t("Hammasini ko'rish")}
          </Button>
        </div>
      </section>
  )
}
export default InvertorSection