import React from "react";
import { connect } from "react-redux";
import { actionAuthLogout } from "../../actions";
import { Box, Link } from "@mui/material";
import {
  StyledBottomNavigation,
  NavWrapperBox,
  BrandImage,
  Icon,
  NavItemsBox,
} from "./header.module";
import "../../App.css";
import envelope from "../../images/envelope.png";
import group from "../../images/group.png";
import user from "../../images/user.png";
import SearchBoxCommponent from "../Search";

const NavBar = ({ id, onLogout }) => {
  return (
    <StyledBottomNavigation>
      <NavWrapperBox>
        <Link href="/">
          <BrandImage />
        </Link>
        <SearchBoxCommponent/>
        <NavItemsBox>
          <Link href="/">
            <Icon src="https://cdn-icons-png.flaticon.com/512/20/20176.png" />
          </Link>
          <Link href="/input">
            <Icon src={envelope} />
          </Link>
          <Link href="/users">
            <Icon src={group} />
          </Link>
          <Link href={`/user/${id}`}>
            <Icon src={user} />
          </Link>
          <Link href="/" onClick={() => onLogout()}>
            <Icon src="https://cdn-icons-png.flaticon.com/512/59/59801.png" />
          </Link>
        </NavItemsBox>
      </NavWrapperBox>
    </StyledBottomNavigation>
  );
};

export const ConnectNavBar = connect(
  (state) => ({ id: state?.auth.payload?.id }),
  { onLogout: actionAuthLogout }
)(NavBar);
