/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useState } from 'react';
import styles from "./service-type.module.scss";
import DeleteModal from '../../modals/delete-modal';
import AddServiceTypeModal from '../../modals/add-service-type-modal';

interface ServiceProps {
  service: any;
}

const ServiceType: React.FC<ServiceProps> = ({ service }) => {
  const { name, description } = service;

  const [deleteModal, setDeleteModal] = useState(false);
  const [updateModal, setUpdateModal] = useState(false);

  return (
    <>
      {deleteModal && <DeleteModal closeModal={() => setDeleteModal(false)} deleteUrl={route("service_types_delete", service.id)} // 👈 actual route helper
  onSuccess={() => console.log("Deleted successfully")} />}
      {updateModal && (
        <AddServiceTypeModal
          service={service}
          type="update"
          closeModal={() => setUpdateModal(false)}
        />
      )}

      <div className={styles["service__type"]}>
        <span>{name}</span>
        <span>{description}</span>
        <div className={styles["service__type--actions"]}>
          <span
            onClick={() => setUpdateModal(true)}
            className={styles["service__type--actions--update"]}
          >
            Update
          </span>
          <span
            onClick={() => setDeleteModal(true)}
            className={styles["service__type--actions--delete"]}
          >
            Delete
          </span>
        </div>
      </div>
    </>
  );
};

export default ServiceType;