import DeleteIcon from "@/shared/icons/dashboard/groups/delete-icon.svg";

type TDeleteSelectedRowsProps<T extends { id: string | number }> = {
  selectedRow: T[];
  deleteMutation: (params: { id: T['id'] }) => void;
};

const DeleteSelectedRows = <T extends { id: string | number }>({
  selectedRow,
  deleteMutation
}: TDeleteSelectedRowsProps<T>) => {
	return (
		<div className='flex items-center gap-2'>
			<div className='text-[#e5e5e5] font-medium text-[14px] leading-[44px]'>
				selected:{" "}
				{selectedRow.length > 0 ? (
					<span className='text-[#052756] text-[18px] leading-[44px]'>
						{selectedRow.length}
					</span>
				) : (
					0
				)}
			</div>
			{selectedRow.length > 0 ? (
				<DeleteIcon
					onClick={() => {
						selectedRow.map(row =>
							deleteMutation({ id: row.id })
						);
					}}
				/>
			) : null}
		</div>
	);
};

export default DeleteSelectedRows;