import React, { useState } from 'react';
import {
  Navbar,
  SearchInputGroup,
  SearchInput,
  NavGroup,
  AdminAccount,
  NavHeader,
} from "./index.styled";
import { SearchIcon } from "./assets/svg/search";
import { NotificationIcon } from "./assets/svg/notification";
import { ArrowDownIcon } from "./assets/svg/arrow-down";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const AdminNavbar = () => {
  const { findText } = useTranslation(wordStore);
  const [searchResultOpen, setSearchResultOpen] = useState(false);
  const [search, setSearch] = useState("");
  return (
    <Navbar>
      <NavHeader>
        <SearchInputGroup>
          <SearchIcon />
          <SearchInput
            type="search"
            value=""
            id="adminSearch"
            name="search"
            placeholder={findText("Type to search...")}
            onChange={(e) => setSearch(e.target.value)}
          />

          {searchResultOpen && (
            <div className="search-result-wrapper">
              <p>
                {findText("Website")}
                <span>{findText("UIUX")}</span>
                {findText("Design")}
              </p>
            </div>
          )}
        </SearchInputGroup>

        <NavGroup>
          <span className="notification__bell">
            <NotificationIcon />
          </span>

          <AdminAccount>
            <div className="admin__info">
              <p className="admin_name">{findText("Thomas Anree")}</p>
              <p className="admin_role">{findText("Ux Designer")}</p>
            </div>
            <div className="profile__box">
              <div className="img_box">
                <img src="" alt="" />
              </div>
              <span>
                <ArrowDownIcon />
              </span>
            </div>
          </AdminAccount>
        </NavGroup>
      </NavHeader>
    </Navbar>
  );
};
export default AdminNavbar;
