import { Stack, Typography } from "@mui/material";
import { ReactNode } from "react";
import { useTranslation } from "react-i18next";

import { UserMenu } from "@/components/UserMenu";
import { AuthorizedContextProvider } from "@/contexts/authorized/AuthorizedContextProvider";
import { LanguageSwitcher } from "@/shared";

interface Props {
	authorized: ReactNode;
}

export function Header({ authorized }: Props) {
	const { t } = useTranslation();

	return (
		<Stack
			direction="row"
			width="100%"
			sx={{
				display: "flex",
				alignItems: "center",
				justifyContent: "space-between",
				padding: "14.5px 60px",
				borderBottomWidth: "1px",
				borderBottomColor: "grey.400",
				borderBottomStyle: "solid",
				backgroundColor: "white",
			}}
		>
			<Typography fontSize={22} fontWeight={500} color="primary.900">
				{t("Monitoring EDDS")}
			</Typography>

			<AuthorizedContextProvider>
				<Stack direction="row" spacing="50px">
					{/* TODO: Перенести в операторов */}
					{authorized}
				</Stack>
			</AuthorizedContextProvider>

			<LanguageSwitcher />

			<AuthorizedContextProvider>
				<UserMenu isVertical={false} onChanged={() => {}} />
			</AuthorizedContextProvider>
		</Stack>
	);
}
