import type { FC } from "react";

import { Badge, Text } from "@mantine/core";
import { useTranslation } from "react-i18next";

import { formatSnapshotTime } from "@/shared/lib";

type InstrumentQuoteStatusProps = {
	quote?: { priceAt: null | string; tradingStatus: null | string };
};

const InstrumentQuoteStatus: FC<InstrumentQuoteStatusProps> = (props) => {
	const { quote } = props;
	const { t } = useTranslation();

	return (
		<>
			<Badge color="gray" variant="light">
				{t(`stock.trading.${quote?.tradingStatus}`, {
					defaultValue: t("stock.trading.unknown"),
				})}
			</Badge>

			{!!quote?.priceAt && (
				<Text c="dimmed" size="xs">
					{t("stock.priceAt", { date: formatSnapshotTime(quote.priceAt) })}
				</Text>
			)}
		</>
	);
};

export { InstrumentQuoteStatus };