import { PersonFill, DoorOpenFill, CardList } from "react-bootstrap-icons";

export default function UserAccountDropdownMenu() {
  return(
    <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> 
        <a href="#" 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</a>
      </div>
    </div>
  );
}