import React from "react";

import arrow from "../../assets/icons/white-left-arrow.svg";

const ButtonNewDesign = ({
  bgColor,
  bgHoverColor,
  iconBgColor,
  textColor,
  border,
  borderColor,
  borderRadius,
  fontSize,
  padding,
  icon,
  buttonIcon,
}) => {
  return (
    <button
      className={`w-fit h-fit flex items-center transiton duration-200 hover:bg-opacity-70 ${bgColor} ${bgHoverColor} ${textColor} ${border} ${borderColor} ${borderRadius} ${fontSize} ${padding}`}
    >
      اطلاعات بیشتر
      {icon && (
        <span className={`rounded-full mr-2 ${iconBgColor} `}>
          <img src={buttonIcon} alt="" className="w-full" />
        </span>
      )}
    </button>
  );
};

export default ButtonNewDesign;

ButtonNewDesign.defaultProps = {
  bgColor: "bg-darkGreenBg",
  bgHoverColor: "hover:bg-gray-900",
  iconBgColor: "bg-darkGreenBg",
  textColor: "text-white",
  border: "border-b-4",
  borderColor: "border-lightBlueBorderColor",
  borderRadius: "rounded",
  fontSize: "text-sm",
  padding: "p-4",
  // icons
  icon: true,
  buttonIcon: arrow,
};