import Link from "next/link";
import React, { useState } from "react";
import Modal from "./Modal";
const Button = ({
  divclassname,
  CurrentItem,
  link,
  linkclassname,
  linktext,
  modaltitle,
}: any) => {
  const [showModal, setShowModal] = useState(false);
  const closeModal = () => {
    setShowModal(false);
  };
  // console.log(modaltitle);
  return (
    <>
      <div className={divclassname}>
        {link ? (
          <Link
            href={link ? link : ""}
            className={`text-[16px] px-[22px] py-[6px] ${linkclassname}`}
          >
            {linktext}
          </Link>
        ) : (
          <button
            className={`text-[16px] px-[12px] py-[6px] ${linkclassname}`}
            onClick={() => setShowModal(true)}
          >
            {linktext}
          </button>
        )}
      </div>

      {/* nested ternary operator */}
      {CurrentItem && modaltitle ? (
        <Modal
          payload={CurrentItem}
          isVisible={showModal}
          onRequestClose={closeModal}
          modaltitle={modaltitle}
        />
      ) : !CurrentItem && modaltitle ? (
        <Modal
          isVisible={showModal}
          onRequestClose={closeModal}
          modaltitle={modaltitle}
        />
      ) : (
        ""
      )}
    </>
  );
};

export default Button;