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

import {
	Dialog,
	DialogContent,
	DialogHeader,
	DialogTitle,
	LanguageSwitcher,
} from "@/shared";
import { Button } from "@/shared/Button";

type Props = {
	onClose: () => void;
};

export function WelcomeDialog({ onClose }: Props) {
	const { t } = useTranslation();

	return (
		<Dialog defaultOpen onOpenChange={onClose}>
			<DialogContent className="sm:max-w-[800px] gap-6">
				<DialogHeader>
					<Stack direction="row" alignItems="center" spacing={2}>
						<LanguageSwitcher />
						<DialogTitle>{t("Welcome")}</DialogTitle>
					</Stack>
				</DialogHeader>

				<Stack spacing={2}>
					<div>
						<Typography>
							{t(
								"Welcome to the Monitoring EDDS system. This system provides comprehensive monitoring and management of alarms and events from security objects.",
							)}
						</Typography>
					</div>
					<div>
						<Typography>
							{t(
								"As an operator, you will be able to view real-time status of objects, process incoming alarms, and coordinate response actions.",
							)}
						</Typography>
					</div>
					<div>
						<Typography>
							{t(
								"Use the navigation menu to access different sections: Objects monitoring, Reports, and Analytics.",
							)}
						</Typography>
					</div>
					<div>
						<Button variant="contained" onClick={onClose}>
							{t("Close")}
						</Button>
					</div>
				</Stack>
			</DialogContent>
		</Dialog>
	);
}
