import React from "react";
import Button from "react-bootstrap/Button";
import { Container } from "react-bootstrap";
import Form from "react-bootstrap/Form";
import Stack from "react-bootstrap/Stack";
import Dropdown from "react-bootstrap/Dropdown";
import DropdownButton from "react-bootstrap/DropdownButton";
import { Link } from "react-router-dom";
import Cookies from 'js-cookie';
export default function Header() {

  return (
    <div className="header">
      <Link to="/" className="logo">
        <div className="logo">HokieX</div>
      </Link>
      <div className="search-bar">
        <Stack direction="horizontal" gap={2}>
          <Form.Control
            className="me-auto"
            placeholder="Add your item here..."
          />
          <Button variant="secondary">search</Button>
        </Stack>
      </div>

      <div className="cart">
        <img id="cart-img" src="./images/shopping-bag.png" alt="cart"></img>
        <div>0</div>
      </div>
      <div className="menu">
        <DropdownButton id="dropdown-basic-button" title="Category">
          <Dropdown.Item href="#/action-1">Clothes</Dropdown.Item>
          <Dropdown.Item href="#/action-2">Furniture</Dropdown.Item>
          <Dropdown.Item href="#/action-3">Accessories</Dropdown.Item>
        </DropdownButton>
      </div>
      <div className="profile">
        <Link to="/profile">
          <img id="profile-img" src="./images/account.png" alt="profile"></img>
        </Link>
        <Link to="/login">
          <div> {Cookies.get("name") && Cookies.get("name") !== undefined ?  Cookies.get("name") : "Login"} </div>
        </Link>
      </div>
    </div>
  );
}
