import React from "react";
//icons
import PlusLightIcon from "../../../assets/icons/buttons/plusLight.svg";
import PlusDarkIcon from "../../../assets/icons/buttons/plusDark.svg";

import Image from "next/image";

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

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

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

  return (
    <button
      className={theme === 'light' ? styles.light_button : styles.dark_button}
      data-id={id}
      disabled={disabled}
      onClick={handleClick}
    >
      <p className={styles.label}>Add</p>
      <Image
        src={theme === "dark" ? PlusDarkIcon : PlusLightIcon}
        alt="Plus icon"
      />
    </button>
  );
};

export default AddButon;