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 IBlock = {
	name: string;
	id: string;
	selected: boolean;
};

type IProps = {
	blocks: IBlock[];
	onSelectedBlock: (block: IBlock) => void;
};
export default function BlockList({ blocks, onSelectedBlock }: IProps) {
	const selectBlock = useCallback(
		(e: React.MouseEvent<HTMLDivElement>) => {
			onSelectedBlock && onSelectedBlock(blocks.find((folder) => folder.id === e.currentTarget.id)!);
		},
		[blocks, onSelectedBlock],
	);
	return (
		<div>
			{blocks.map((folder) => {
				return (
					<div onClick={selectBlock} 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>
	);
}