import React from "react";
//icons
import PlusLightIcon from "../../../assets/icons/buttons/deleteIconLight.svg";
import PlusDarkIcon from "../../../assets/icons/buttons/deleteIconDark.svg";

import Image from "next/image";

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

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

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

  return (
    <button
      className={
        theme === "light"
          ? styles.light_delete_button
          : styles.dark_delete_button
      }
      data-id={id}
      disabled={disabled}
      onClick={handleClick}
    >
      <Image
        src={theme === "dark" ? PlusDarkIcon : PlusLightIcon}
        alt="Delete icon"
      />
    </button>
  );
};

export default DeleteIcon;