import React from "react";
import Dropdown from "react-bootstrap/Dropdown";

import { IAccount } from "jmap-client-ts/lib/types";

type AccountIdMap = { [accountId: string]: IAccount };
type AccountListProps = {
	accounts: AccountIdMap;
};

const AccountList: React.FC<AccountListProps> = ({ accounts }) => {
	return (
		<Dropdown>
			<Dropdown.Toggle variant="success" id="dropdown-basic">
				Dropdown Button
			</Dropdown.Toggle>

			<Dropdown.Menu>
				{Object.keys(accounts).map((key: keyof AccountIdMap) => (
					<Dropdown.Item href={"#/" + key}>{accounts[key].name}</Dropdown.Item>
				))}
			</Dropdown.Menu>
		</Dropdown>
	);
};
export default AccountList;