import { useTranslation } from "react-i18next";

import { ArrowDownIcon, DialogHeader } from "@/shared";

import { useDialogStore } from "../lib/useDialogStore";

export function DialogDefaultHeader() {
	const { t } = useTranslation("translation");
	const { back, getIsRoot } = useDialogStore();

	return (
		<DialogHeader>
			<div className="flex justify-between text-[var(--black-800)] font-normal">
				<button
					type="button"
					className="flex items-center gap-2"
					onClick={back}
					title={t(getIsRoot() ? "To main" : "Back")}
				>
					<ArrowDownIcon angle={90} color="var(--black-800)" />
					{t(getIsRoot() ? "To main" : "Back")}
				</button>
				{/* <button
					type="button"
					className="flex items-center gap-2"
					onClick={close}
					title={t("Close")}
				>
					<CloseIcon color="#FF3B30" />
				</button> */}
			</div>
			{/* <DialogTitle>{content.title}</DialogTitle> */}
		</DialogHeader>
	);
}
