import { Group } from "../model/Group";

import styles from "./GroupView.module.css";
import { ItemView } from "./ItemView";

export function GroupView(props: Group) {
	return (
		<div className={styles.container}>
			{props.label && <div className={styles.label}>{props.label}</div>}

			<div
				className={`${styles.itemsContainer} ${
					props.direction === "row" ? styles.row : styles.column
				}`}
			>
				{props.items.map((item) => (
					<ItemView {...item} key={item.key} />
				))}
			</div>
		</div>
	);
}
