import { FC } from "react";
import { useTranslation } from "react-i18next";

import { Centroid } from "@/common/components/Centroid";
import { Loader } from "@/common/components/Loader";
import { useGetZoneList } from "@/contracts/zones";
import { TableInfinity } from "@/shared";

interface Props {
	assetId: string;
}

export const Zones: FC<Props> = ({ assetId }) => {
	const { t } = useTranslation();
	const { data: zones, isLoading } = useGetZoneList({
		AssetId: assetId,
	});

	if (isLoading) {
		return (
			<Centroid>
				<Loader />
			</Centroid>
		);
	}

	if (!zones) {
		return <Centroid>{t("noData")}</Centroid>;
	}

	return (
		<TableInfinity
			columns={[
				{
					label: t("zoneNumber"),
					width: 1,
				},
				{
					label: t("zoneName"),
					width: 2,
				},
				{
					label: t("note"),
					width: 3,
				},
			]}
			rows={zones.items.map((x) => ({
				values: [x.index.toFixed(0), x.name, x.description],
			}))}
		/>
	);
};
