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";

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

function ModelServiceModal({
  isOpen,
  userId,
  onClose,
  services,
}: ModelModalProps) {
  return (
    <Modal isOpen={isOpen} onClose={onClose} height="500px">
      <div className="glass-panel-strong comments-modal-glass flex max-w-xl flex-col items-center rounded-t-3xl p-4 mx-auto">
        <span className="my-4 font-bold">لیست خدمات</span>
        {services
          ?.filter((service) => service.status !== "UnderReview")
          .map((service) => (
            <ServiceItem key={service._id} service={service} />
          ))}

        <Link className="block" href={`/offer/${userId}`}>
          <RoundedButton className="h-9 px-5 border-[#0C8002] text-[#0C8002] mt-16">
            ثبت درخواست
          </RoundedButton>
        </Link>
      </div>
    </Modal>
  );
}

export default ModelServiceModal;
