import React, { useCallback } from "react";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "../Typography";
import ChevronIcon from "@Assets/Icons/chevron.svg";
import Image from "next/image";

export type IFolder = {
	name: string;
	id: string;
	selected: boolean;
};

type IProps = {
	list: IFolder[];
	onSelectedFolder: (block: IFolder) => void;
};
export default function FolderList({ list, onSelectedFolder }: IProps) {
	const selectFolder = useCallback(
		(e: React.MouseEvent<HTMLDivElement>) => {
			onSelectedFolder && onSelectedFolder(list.find((folder) => folder.id === e.currentTarget.id)!);
		},
		[list, onSelectedFolder],
	);
	return (
		<div>
			{list.map((folder) => {
				return (
					<div onClick={selectFolder} key={folder.id} id={folder.id}>
						<div className={classes["root"]} data-selected={folder.selected.toString()}>
							<div className={classes["left-side"]}>
								<Typography typo={ITypo.P_16}>{folder.name}</Typography>
							</div>
							<Image alt="chevron" src={ChevronIcon} />
						</div>
					</div>
				);
			})}
		</div>
	);
}