import React, { useState } from "react";
import "./CounterDesign.scss";

import blackDisLikeIcon from "../../assets/icons/black-dislike-icon.svg";
import blackLikeIcon from "../../assets/icons/black-like-icon.svg";
import decrementCounterIcon from "../../assets/icons/decrement-counter-icon.svg";
import incrementCounterIcon from "../../assets/icons/increment-counter-icon.svg";

// {deliveryIcon && (
//   <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
// )}

const CounterDesign = ({
  counterColor,
  counterIncreaseBtn,
  counterDecreaseBtn,
  likeBtn,
}) => {
  const [count, setCount] = useState(0);

  return (
    <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-base bg-blue-300 rounded-full shadow-md shadow-blue-900 text-white p-2">
          طراحی کانتر
        </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">
            counterDesign
          </span>
          است.
        </p>
      </div>
      {/* counter design */}
      <div className="flex flex-col items-center justify-center">
        {likeBtn && (
          <div className="flex items-center">
            <img
              src={blackLikeIcon}
              alt=""
              className="w-8 mb-4 cursor-pointer pointer transition delay-150 duration-300 ease-in-out transform hover:-translate-y-2"
              onClick={() => setCount(count + 1)}
            />
            <img
              src={blackDisLikeIcon}
              alt=""
              className="w-8 mb-4 cursor-pointer transition delay-150 duration-300 ease-in-out transform hover:translate-y-2"
              onClick={() => setCount(count - 1)}
            />
          </div>
        )}
        {counterIncreaseBtn && (
          <img
            src={incrementCounterIcon}
            alt=""
            className="w-8 mb-4 cursor-pointer transition delay-150 duration-300 ease-in-out hover:-translate-y-2 "
            onClick={() => setCount(count + 1)}
          />
        )}
        <p
          className={`text-sm sm:text-base md:text-2xl font-bold text-counterColor`}
          style={
            count > -1
              ? count === 0
                ? { color: "gray" }
                : { color: "green" }
              : { color: "red" }
          }
        >
          {count}
        </p>
        {counterDecreaseBtn && (
          <img
            src={decrementCounterIcon}
            alt=""
            className="w-8 mt-4 cursor-pointer transition delay-150 duration-300 ease-in-out hover:translate-y-2"
            onClick={() => setCount(count - 1)}
          />
        )}
      </div>
    </section>
  );
};

export default CounterDesign;

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

CounterDesign.defaultProps = {
  counterColor: "text-darkRedTextColor",
  // for icons
  likeBtn: true,
  counterIncreaseBtn: true,
  counterDecreaseBtn: true,
};