import { PersonFill, DoorOpenFill, CardList } from "react-bootstrap-icons";
import { BrowserRouter } from "react-router-dom";
import RedirectTo from '../lib/redirect_to';
import Token from "../lib/token";
import redirectTo from "../lib/redirect_to";

export default function UserAccountDropdownMenu() {
  function logout() {
    const token = new Token();
    token.logout();
    
    redirectTo('/products');
  }

  return(
    <BrowserRouter>
      <div id="userAccountDropdownMenu" className="hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
        <ul className="relative py-2 text-sm text-gray-700 dark:text-gray-200">
          <li className="flex">
            <i className="px-1 my-2"><PersonFill size={16} color="#394490"/></i>
            <a href="/account" className="block px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Cuenta</a>
          </li>
          <li className="flex">
            <i className="px-1 my-2"><CardList size={16} color="#394490"/></i>
            <a href="/account/orders" className="block px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Historial de órdenes</a>
          </li>
        </ul>
        <div className="flex py-2">
        <i className="px-1 my-2"><DoorOpenFill size={16} color="#394490"/></i>
        <button type="button" onClick={logout} className="flex block px-2 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
          Cerrar sesión
        </button>
        </div>
      </div>
    </BrowserRouter>
  );
}