import { SimpleGrid } from "@mantine/core";
import type { FC } from "react";
import type { AccountPagePositionSection } from "../AccountPage.vm";
import { PositionCard } from "./PositionCard.view";
import { Section } from "./Section.view";

type PositionSectionProps = {
	title: string;
	section: AccountPagePositionSection;
};

const PositionSection: FC<PositionSectionProps> = (props) => {
	const { title, section } = props;

	return (
		<Section title={title}>
			<SimpleGrid cols={section.wide ? 1 : { base: 1, sm: 2, md: 3 }}>
				{section.positions.map((position) => (
					<PositionCard
						key={`${position.figi}-${position.displayName}-${position.quantity}`}
						position={position}
						wide={section.wide}
						variant={
							section.kind === "stocks"
								? "stock"
								: section.kind === "bonds"
									? "bond"
									: undefined
						}
					/>
				))}
			</SimpleGrid>
		</Section>
	);
};

export { PositionSection };