"use client";

import React from "react";
import Modal from "../elements/Modal";
import { Service } from "@/types/types";
import ServiceItem from "../main/Services/ServiceItem";
import RoundedButton from "../elements/RoundedButton";
import Link from "next/link";
import { useTranslation } from "react-i18next";

type ModelModalProps = {
  services: Service[] | undefined;
  isOpen: true;
  onClose: () => void;
  userId: string;
};

function ModelServiceModal({
  isOpen,
  userId,
  onClose,
  services,
}: ModelModalProps) {
  const { t } = useTranslation("common");

  return (
    <Modal isOpen={isOpen} onClose={onClose} height="500px">
      <div className="mx-auto flex w-full max-w-xl flex-col items-center p-4">
        <span className="my-4 font-bold">{t("models.serviceList")}</span>
        {services
          ?.filter((service) => service.status !== "UnderReview")
          .map((service) => (
            <ServiceItem key={service._id} service={service} />
          ))}

        <Link className="mt-16 block" href={`/offer/${userId}`}>
          <RoundedButton variant="primary" className="h-9 px-5">
            {t("models.submitRequest")}
          </RoundedButton>
        </Link>
      </div>
    </Modal>
  );
}

export default ModelServiceModal;
