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

import { AssetModel } from "@/contracts/client.schemas";

import { EVENT_TABS, OBJECT_INFO_TABS } from "../../../constants";

import { EventTabList } from "./EventTabList";
import { ObjectTabList } from "./ObjectTabList";

interface ObjectEventDetailsProps {
	asset: AssetModel;
}

export const ObjectEventDetails: FC<ObjectEventDetailsProps> = ({ asset }) => {
	const { t } = useTranslation();

	return (
		<Box
			sx={{
				display: "flex",
				flexDirection: "column",
				gap: 0,
				width: "100%",
				height: "100%",
			}}
		>
			<Box>
				<Typography variant="h5">
					<span className="me-2 fst-italic fs-6">{t("object")}:</span>
					{asset.name}
				</Typography>
			</Box>
			<Box
				sx={{
					height: EVENT_TABS,
				}}
			>
				<EventTabList />
			</Box>
			<Box
				sx={{
					height: OBJECT_INFO_TABS,
				}}
			>
				<ObjectTabList asset={asset} />
			</Box>
		</Box>
	);
};
