import type { FC } from "react";

import { Select } from "@mantine/core";

import { useAccountScopeSwitchVm } from "./AccountScopeSwitch.vm";

type AccountScopeSwitchProps = { accountId: string; section?: string };

const AccountScopeSwitch: FC<AccountScopeSwitchProps> = (props) => {
	const { accountId, data, onChange, t } = useAccountScopeSwitchVm(props);

	return (
		<Select
			allowDeselect={false}
			data={data}
			label={t("accounts.scope")}
			maw={360}
			onChange={onChange}
			value={accountId}
			w="100%"
		/>
	);
};

export { AccountScopeSwitch };