import React, { FC } from "react";
import svgEye from "../assets/icons/eye.svg";
import svgPencil from "../assets/icons/pencil.svg";
import svgTrash from "../assets/icons/trash.svg";
import svgPlus from "../assets/icons/plus.svg";
import svgConfig from "../assets/icons/settings.svg";
import svgFile from "../assets/icons/file.svg";
import svgSearch from "../assets/icons/search.svg";
import {info} from '../assets/icons/remastered/'

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  disabled?: boolean;
  label?: string;
  variant?: "delete" | "edit" | "add" | "info" | "view" |"config" | "search"|"file"|"secondary"|"secondary-mini"|"primary-mini";
  buttonClass?: string,
  onClick?: any;
}

const Button: FC<ButtonProps> = ({ variant, label, onClick, disabled, buttonClass }) => {
  let scssClass = "";
  let image = "";

  if(!buttonClass){
    switch (variant) {
    case "delete":
      scssClass = "c-btn c-btn-mini c-btn-red";
      image = svgTrash;
      break;
    case "edit":
      scssClass = "c-btn c-btn-mini c-btn-green";
      image = svgPencil;
    break;
    case "info":
      scssClass = "c-btn c-btn-mini c-btn-green";
      image = info;
    break;
    case "add":
      scssClass = "c-btn c-btn-mini c-btn-green";
      image = svgPlus;
      break;
    case "view":
      scssClass = "c-btn c-btn-mini c-btn-green";
      image = svgEye;
      break;
    case "config":
      scssClass = "c-btn c-btn-mini c-btn-green";
      image = svgConfig;
      break;
    case "search":
      scssClass = "c-btn c-btn-mini c-btn-green";
      image = svgSearch;
      break;
    case "file":
      scssClass = "c-btn c-btn-mini c-btn-green";
      image = svgFile;
      break;
    case "secondary":
      scssClass = "c-btn c-btn-white";
      break;
    case "secondary-mini":
      scssClass="c-btn c-btn-white c-btn-mini"
      break;
    case "primary-mini":
      scssClass="c-btn c-btn-green c-btn-mini"
      break;
    default:
      //Active
      scssClass = "c-btn c-btn-green";
      break;
  }}else{
    scssClass = buttonClass
  }
  

  return (
    <>
      <button disabled={disabled} className={scssClass} onClick={onClick}>
        {!image ? label : <img src={image} alt="" />}
      </button>
    </>
  );
};

export default Button;
