import React from "react";
import { Container, Navbar, Nav } from "react-bootstrap";
import style from "./Navbar.module.scss";
import logo from "../../assets/images/logo.png";
import { Input } from "antd";
import { IoCartOutline } from "react-icons/io5";
import { headerData } from "../../Helper/dummyData";
import { useSelector } from "react-redux";

const { Search } = Input;

const MainNavbar = ({ setVisible }) => {
  const { cart } = useSelector((state) => state.cart);

  return (
    <>
      <div className={style.mainCOntainer}>
        <section className={style.firstSection}>
          <p>Delivering Only In Karachi</p>
        </section>
        <section className={style.secondSection}>
          <p>Customer Care</p>
          <p>0900 78601</p>
        </section>
        <section>
          <Navbar
            collapseOnSelect
            expand="lg"
            bg="light"
            variant="light"
            className={style.navbarMainContainer}
          >
            <Container>
              <Navbar.Brand href="">
                <img src={logo} alt="Hum Mart Logo" />
              </Navbar.Brand>
              <Navbar.Toggle aria-controls="responsive-navbar-nav" />
              <Navbar.Collapse id="responsive-navbar-nav">
                <Nav className="me-auto"></Nav>
                <Nav className={`me-auto ${style.searchContainer}`}>
                  <Search
                    placeholder="Search Products"
                    enterButton="Search"
                    size="large"
                  />
                  {/* <Nav.Link href="#features">Features</Nav.Link>
                  <Nav.Link href="#pricing">Pricing</Nav.Link> */}
                </Nav>
                <Nav>
                  <Nav.Link>
                    <div
                      className={style.cartContianer}
                      onClick={() => setVisible(true)}
                    >
                      <IoCartOutline className={style.cartIcon} />
                      <p className={style.cartCount}>{Object.values(cart).length}</p>
                    </div>
                  </Nav.Link>
                </Nav>
              </Navbar.Collapse>
            </Container>
          </Navbar>
        </section>
        <Container>
          <section className={style.thirdContainer}>
            <ul>
              {headerData?.map((item, index) => {
                return (
                  <li key={index}>
                    <a
                      href={item?.link}
                      className={
                        headerData?.length - 1 !== index
                          ? style.borderRight
                          : ""
                      }
                    >
                      {item?.link}
                    </a>
                  </li>
                );
              })}
            </ul>
          </section>
        </Container>
      </div>
    </>
  );
};

export default MainNavbar;
