/* eslint-disable react/no-danger */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import type { ReactNode } from "react";

import { Button } from "@/components/ui/button/button";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { Modal } from "@/components/ui/modal/modal";
import { useModal } from "@/components/ui/modal/modal.hook";
import { useLocale } from "@/hooks/useLocale";

export interface ModalableItemProps {
  title: string;
  modalContent?: ReactNode;
}

const ModalableItem = ({ title, modalContent }: ModalableItemProps) => {
  const { t } = useLocale();
  const { openModal, closeModal, modalOpen } = useModal({ open: false });

  const handleClick = () => {
    if (modalContent) openModal();
  };

  return (
    <>
      <div
        className="flex cursor-pointer items-center justify-between py-2 text-xs text-gray-500"
        onClick={handleClick}
      >
        <span>{title}</span>
        <span>
          <LIcon name="ChevronRight" size={14} />
        </span>
      </div>
      {modalContent && (
        <Modal
          open={modalOpen}
          title={title}
          closable={false}
          className="z-[101]"
          size="xl"
          footer={
            <div className="flex items-end justify-end pt-4">
              <Button onClick={closeModal} variant="primary" className="block">
                {t("Close")}
              </Button>
            </div>
          }
        >
          <div
            className="max-h-[calc(100vh-100px)] overflow-auto"
            dangerouslySetInnerHTML={{
              __html: modalContent,
            }}
          />
        </Modal>
      )}
    </>
  );
};

export default ModalableItem;