import { PropsWithChildren, ReactNode } from "react";
import { useTranslation } from "react-i18next";

import { LoadIndicator } from "@/contexts/loading/ui/LoadIndicator";

type Props = PropsWithChildren<{
	titleKey: string;
	isFetching?: boolean;
	controls?: ReactNode;
}>;

export const ChartContainer = ({ titleKey, children, isFetching, controls }: Props) => {
	const { t } = useTranslation();

	return (
		<div className="border border-[var(--black-200)] rounded bg-[var(--white)] p-4 flex flex-col gap-4 shadow-[0_0_10px_0_rgba(0,0,0,0.1)] h-[400px] w-[400px]">
			<div className="flex items-center justify-between">
				<h2 className="text-xl font-bold text-[var(--black-900)]">
					{t ? t(titleKey) : titleKey}
				</h2>
				{controls ? <div className="ml-3">{controls}</div> : null}
			</div>

			{isFetching ? <LoadIndicator /> : children}
		</div>
	);
};
