import { Card, SimpleGrid, Stack, Text } from "@mantine/core";
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import type { BrokerageAccount } from "../api/useBrokerageAccounts";
import { accountTypeKey } from "../model/display";
import classes from "./BrokerageAccountList.module.css";

type BrokerageAccountListProps = { accounts: BrokerageAccount[] };

const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
	const { accounts } = props;
	const { t } = useTranslation();

	return (
		<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
			{accounts.map((account) => (
				<Card
					component={Link}
					to={`/accounts/${account.id}`}
					key={account.id}
					className={classes.card}
					padding="lg"
					radius="lg"
					withBorder
				>
					<Stack gap="xs">
						<Text className={classes.kicker} size="xs" fw={700}>
							{t(accountTypeKey(account.type))}
						</Text>
						<Text fw={800} size="lg">
							{account.name}
						</Text>
						{account.openedOn ? (
							<Text c="dimmed" size="sm">
								{t("accounts.openedOn", {
									date: new Intl.DateTimeFormat("ru-RU", {
										dateStyle: "long",
										timeZone: "UTC",
									}).format(new Date(`${account.openedOn}T00:00:00Z`)),
								})}
							</Text>
						) : null}
					</Stack>
				</Card>
			))}
		</SimpleGrid>
	);
};

export { BrokerageAccountList };