"use client";
import React, { useState } from "react";
import { Service } from "@/shared/types/services";
import Image from "next/image";
import ServiceModal from "@/features/services/ui/services-section/service-modal";
import { useTranslations } from "next-intl";

interface ServiceSectionProps {
  services: Service[];
}

const ServicesSection = ({ services }: Readonly<ServiceSectionProps>) => {
  const t = useTranslations("");
  const [selectedService, setSelectedService] = useState<Service | null>(null);
  return (
    <div className={"my-container section-wrapper"}>
      <h1 className={"section-title text-center"}>{t("Xizmatlar")}</h1>
      <div className={"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 mx-4 md:mx-0 gap-6 mt-12"}>
        {services.map((service) => (
          <div
            className={
              "cursor-pointer border hover:border-primary transition-all duration-400 bg-white p-12 w-full flex flex-col justify-center items-center gap-2 h-full"
            }
            key={service.id}
            onClick={() => {
              setSelectedService(service);
            }}
          >
            <div className={"w-full flex flex-col items-center gap-2"}>
              <Image src={service.image} alt={""} width={100} height={100} />
              <h1 className={"text-xl font-bold text-center"}>
                {service.name}
              </h1>
            </div>
          </div>
        ))}
      </div>
      {selectedService && (
        <ServiceModal
          selectedService={selectedService}
          setSelectedService={setSelectedService}
        />
      )}
    </div>
  );
};
export default ServicesSection;
