import React from "react";

import cartIcon from "../../../assets/icons/dark-crimson-cart-icon.svg";
import profileIcon from "../../../assets/icons/dark-crimson-profile-icon.svg";
import searchIcon from "../../../assets/icons/dark-crimson-search-box.svg";
import lightGraySearchIcon from "../../../assets/icons/light-gray-search-box.svg";
import darkCrimsonHamburgerMenu from "../../../assets/icons/dark-crimson-hamburger-menu.svg";
import verticalLineIcon from "../../../assets/icons/dark-crimson-vertical-line.svg";

const HeaderDesign1 = ({
  iconHolder,
  loginBtn,
  iconProfile,
  iconCart,
  iconSearch,
  border,
  btnRounded,
  btnPY,
  btnPX,
  loginBtnBgColor,
  loginBorderColor,
  registerBtnBgColor,
  loginTextColor,
  registerTextColor,
  menuItems,
  category,
  searchBox,
  topHeader,
  bottomHeader,
}) => {
  return (
    <header className="container mx-auto py-2 px-8 w-full bg-white rounded shadow-sm">
      {topHeader && (
        <div className="flex justify-between items-center mb-2">
          <div className="">
            <span className="text-xs font-light ml-4 text-productPrice">
              انتخاب کشور
            </span>
            <span className="text-xs font-light text-productPrice">
              پیگیری سفارش
            </span>
          </div>
          <div className="">
            <span className="text-xs font-light text-productPrice ml-2 ">
              شکایات{" "}
            </span>
            <span className="text-xs font-light text-productPrice">
              ورود و ثبت نام
            </span>
          </div>
        </div>
      )}
      <div className="flex justify-between items-center relative">
        <div className="ml-10">
          <span className="text-sm font-bold text-productPrice ml-4">
            Design System
          </span>
          {category && (
            <span className="text-sm font-bold text-productPrice ">
              دسته بندی ها
            </span>
          )}
        </div>
        {menuItems && (
          <div
            className="hidden lg:flex items-center w-3/5 justify-around flex-1 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
            style={{ maxWidth: 700 }}
          >
            <a href="#" className="text-productPrice text-xs">
              محصولات
            </a>
            <a href="#" className="text-productPrice text-xs">
              دسته بندی
            </a>
            <a href="#" className="text-productPrice text-xs">
              تماس با ما
            </a>
            <a href="#" className="text-productPrice text-xs">
              درباره ما
            </a>
            <a href="#" className="text-productPrice text-xs">
              پیگیری
            </a>
            <a href="#" className="text-productPrice text-xs">
              وبلاگ
            </a>
          </div>
        )}
        {searchBox && (
          <div
            className="flex flex-1 w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
            style={{ maxWidth: 700 }}
          >
            <div className="flex flex-row-reverse items-center relative w-full">
              <img
                src={lightGraySearchIcon}
                alt=""
                className="w-4 h-4 absolute left-3"
              />
              <input
                type="text"
                placeholder="نام کالا را جستجو کنید..."
                className="text-xs rounded-lg pr-4 pl-10 py-2 w-full border border-gray-400"
              />
            </div>
          </div>
        )}
        {loginBtn && (
          <div className="flex justify-end mr-7">
            <button
              className={`ml-2 text-xs font-light ${border} ${btnRounded} ${btnPY} ${btnPX} ${loginBtnBgColor} ${loginBorderColor} ${loginTextColor}`}
            >
              ورود
            </button>
            {/* <img src={verticalLineIcon} alt="" className="" /> */}
            <button
              className={`ml-2 text-xs font-light ${border} ${btnRounded} ${btnPY} ${btnPX} ${registerBtnBgColor} ${loginBorderColor} ${registerTextColor}`}
            >
              ثبت نام
            </button>
          </div>
        )}
        {iconHolder && (
          <div className="w-1/5	flex justify-end items-center ">
            <p className="text-xs text-productPrice ml-2">
              140,000
              <span className="text-xs font-light text-productPrice">
                تومان
              </span>
            </p>
            {iconCart && <img src={cartIcon} alt="" className="w-5 h-5 ml-2" />}
            {iconSearch && (
              <img src={searchIcon} alt="" className="w-5 h-5 ml-2" />
            )}
            {iconProfile && (
              <img src={profileIcon} alt="" className="w-5 h-5" />
            )}
          </div>
        )}
      </div>
      {bottomHeader && (
        <div className="flex items-center mt-4 relative w-full ">
          <div className="ml-10 flex items-center">
            <img src={darkCrimsonHamburgerMenu} alt="" className="w-5 h-5" />
            <span className="text-xs text-productPrice mr-2">
              دسته بندی ها کالاها
            </span>
          </div>
          <div
            className="hidden lg:flex items-center justify-around w-3/5 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
            style={{ maxWidth: 700 }}
          >
            <a href="#" className="text-productPrice text-xs">
              محصولات
            </a>
            <a href="#" className="text-productPrice text-xs">
              دسته بندی
            </a>
            <a href="#" className="text-productPrice text-xs">
              تماس با ما
            </a>
            <a href="#" className="text-productPrice text-xs">
              درباره ما
            </a>
            <a href="#" className="text-productPrice text-xs">
              پیگیری
            </a>
            <a href="#" className="text-productPrice text-xs">
              وبلاگ
            </a>
          </div>
        </div>
      )}
    </header>
  );
};

export default HeaderDesign1;

// یک تگ دیو در نظر گرفتم برای 3 تا ایکن سرچ/پروفایل/اضافه کردن به سبد خرید که اینارو انداختم داخل دیو ایکن هولدر

HeaderDesign1.defaultProps = {
  border: "border",
  loginBorderColor: "border-darkCrimsonBorderColor",
  btnRounded: "rounded-md",
  loginBtnBgColor: "bg-white",
  loginTextColor: "text-productPrice",
  registerBtnBgColor: "bg-darkCrimsonBgColor",
  registerTextColor: "text-white",
  btnPY: "py-2",
  btnPX: "px-8",

  topHeader: true,
  bottomHeader: true,

  menuItems: false,
  category: false,
  searchBox: true,
  // icons
  loginBtn: false,

  iconHolder: true,
  iconProfile: false,
  iconCart: true,
  iconSearch: false,
};