import React from "react";
//icons
import backLightIcon from "../../../assets/icons/buttons/backButtonLight.svg";
import backButtonDark from "../../../assets/icons/buttons/backButtonDark.svg";

import Image from "next/image";

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

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

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

  return (
    <button
      className={
        theme === "light" ? styles.light_back_button : styles.dark_back_button
      }
      data-id={id}
      disabled={disabled}
      onClick={handleClick}
    >
      <Image
        src={theme === "dark" ? backButtonDark : backLightIcon}
        alt="Back icon"
      />
    </button>
  );
};

export default BackIcon;