import {
	Button,
	Dialog,
	DialogActions,
	DialogContent,
	DialogTitle,
	Typography,
} from "@mui/material";
import { FC } from "react";
import { useTranslation } from "react-i18next";

import { LanguageSwitcher } from "@/shared";

import { useAudioStore } from "../lib/audio.store";

export const AudioErrorDialog: FC = () => {
	const service = useAudioStore();
	const { t } = useTranslation();

	const handleOk = () => {
		service.setIsShowError(false);
	};

	return (
		<Dialog security="error" open={service.isShowError}>
			<DialogTitle>
				<LanguageSwitcher />
			</DialogTitle>
			<DialogContent>
				<Typography variant="body1">
					{t(
						"forTheApplicationToWorkCorrectlyYouMustAllowPlaybackOfAudioFilesOnTheSite"
					)}
				</Typography>
				<Typography variant="body1">
					{t("clickOkToCloseTheWindow")}
				</Typography>
			</DialogContent>
			<DialogActions>
				<Button onClick={handleOk} color="primary">
					{t("ok")}
				</Button>
			</DialogActions>
		</Dialog>
	);
};
