import { ArrowDownIcon } from "@/shared";

import { AssetListView } from "../AssetListView/AssetListView";

import styles from "./GroupView.module.css";

const arrowActiveColor = "var(--white)";

interface Props {
	label: string;
	id: string;
	depth: number;
}

export function GroupView(props: Props) {
	return (
		<>
			<div
				className={`${styles.container} ${styles.active} ${
					props.depth > 0 && styles.indent
				}`}
			>
				<div className={styles.label}>{props.label}</div>
				<div className={styles.arrow}>
					<ArrowDownIcon color={arrowActiveColor} />
				</div>
			</div>

			<AssetListView groupId={props.id} depth={props.depth} />
		</>
	);
}
