import React from "react";
//icons
import CloseLightIcon from "../../../assets/icons/buttons/closeButtonLight.svg";
import CloseDarkIcon from "../../../assets/icons/buttons/closeButtonDark.svg";

import Image from "next/image";

import styles from "./CloseIcon.module.scss";

type ButtonT = {
  id: string;
  handleClick: (e: any) => void;
  disabled?: boolean;
  theme?: "light" | "dark";
};

const CloseIcon = (props: ButtonT) => {
  const { id, handleClick, disabled, theme = "light" } = props;

  return (
    <button
      className={
        theme === "light" ? styles.light_close_button : styles.dark_close_button
      }
      data-id={id}
      disabled={disabled}
      onClick={handleClick}
    >
      <Image
        src={theme === "dark" ? CloseDarkIcon : CloseLightIcon}
        alt="Close icon"
      />
    </button>
  );
};

export default CloseIcon;