import React from "react";
import "./ButtonDesign.scss";

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

import whiteLeftArrow from "../../assets/icons/white-left-arrow.svg";
import whiteRightArrow from "../../assets/icons/white-right-arrow.svg";
import whiteUpwardArrow from "../../assets/icons/white-upward-arrow.svg";
import whiteDownwardArrow from "../../assets/icons/white-downward-arrow.svg";

import blackRightArrow from "../../assets/icons/black-right-arrow.svg";
import blackLeftArrow from "../../assets/icons/black-left-arrow.svg";
import blackUpwardArrow from "../../assets/icons/black-upward-arrow.png";
import blackDownwardArrow from "../../assets/icons/black-downward-arrow.png";

const ButtonDesign = ({
  buttonBgColor,
  circleArrowBgClr,
  buttonTextColor,
  buttonBorder,
  buttonBorderColor,
  buttonBorderRadius,
  buttonPaddingX,
  buttonPaddingY,
  imageMarginRight,
  imageWidth,
  imageHeight,
  // icons
  leftArrowWhite,
  rightArrowWhite,
  upwardArrowWhite,
  downwardArrowWhite,
  leftArrowBlack,
  rightArrowBlack,
  upwardArrowBlack,
  downwardArrowBlack,

  circleArrow,
}) => {
  return (
    <div>
      <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
        <div className="flex items-center justify-between">
          <h2 className="text-lg text-black">طراحی دکمه های سایت</h2>
        </div>
        <div className="my-4">
          <p className="leading-10">
            نام این کامپوننت
            <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
              buttonDesign
            </span>
            است.
          </p>
        </div>
        {/* Button UI Design */}
        <div className="flex flex-wrap justify-around items-center">
          <div>
            <button
              className={`btnUiDesign ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
            >
              اطلاعات بیشتر
              {leftArrowWhite && (
                <img
                  src={whiteLeftArrow}
                  alt=""
                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
                />
              )}
              {rightArrowWhite && (
                <img
                  src={whiteRightArrow}
                  alt=""
                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
                />
              )}
              {upwardArrowWhite && (
                <img
                  src={whiteUpwardArrow}
                  alt=""
                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
                />
              )}
              {downwardArrowWhite && (
                <img
                  src={whiteDownwardArrow}
                  alt=""
                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
                />
              )}
              {leftArrowBlack && (
                <img
                  src={blackLeftArrow}
                  alt=""
                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
                />
              )}
              {rightArrowBlack && (
                <img
                  src={blackRightArrow}
                  alt=""
                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
                />
              )}
              {upwardArrowBlack && (
                <img
                  src={blackUpwardArrow}
                  alt=""
                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
                />
              )}
              {downwardArrowBlack && (
                <img
                  src={blackDownwardArrow}
                  alt=""
                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
                />
              )}
              {circleArrow && (
                <span className={`rounded-full p-2 mr-2 ${circleArrowBgClr} `}>
                  <img src={whiteLeftArrow} alt="" className="w-4" />
                </span>
              )}
            </button>
          </div>
        </div>
      </section>
    </div>
  );
};

export default ButtonDesign;

// color classes that i defined in tailwind.config.js and we can use for text color:
// ----> text-grayTextColor
// ----> text-white

// color classes that i defined in tailwind.config.js and we can use for background color:
// ----> bg-darkGreenBg
// ----> bg-midGrayBgColor

// color classes that i defined in tailwind.config.js and we can use for border color:
// ----> border-lightBlueBorderColor

ButtonDesign.defaultProps = {
  buttonBgColor: "bg-darkGreenBg",
  circleArrowBgClr: "bg-darkGreenBg",
  buttonTextColor: "text-white",
  buttonBorder: "border-b-4",
  buttonBorderColor: "border-lightBlueBorderColor",
  buttonBorderRadius: "rounded",
  buttonPaddingX: "px-6",
  buttonPaddingY: "py-4",
  imageMarginRight: "mr-2",
  imageWidth: "w-4",
  imageHeight: "h-4",
  // icons
  leftArrowWhite: true,
  rightArrowWhite: false,
  upwardArrowWhite: false,
  downwardArrowWhite: false,
  leftArrowBlack: false,
  rightArrowBlack: false,
  upwardArrowBlack: false,
  downwardArrowBlack: false,
  circleArrow: false,
};