'use client';

import React, { ReactElement, ReactNode } from 'react';

type Props = {
    itemRenderer?: (child: ReactNode, index: number) => ReactElement;
    children: ReactNode;
} & React.OlHTMLAttributes<HTMLUListElement>;

function VerticalScrollView({ itemRenderer, children, ...restProps }: Props) {
    const items = React.Children.toArray(children);

    return (
        <ul
            {...restProps}
            style={{
                display: 'flex',
                flexDirection: 'column',
                overflowY: 'auto',
                gap: '16px',
                padding: 0,
                margin: 0,
                listStyle: 'none',
                ...restProps.style,
            }}
        >
            {items.map((child, index) => (
                <li key={index} style={{ flex: '0 0 auto' }}>
                    {itemRenderer ? itemRenderer(child, index) : child}
                </li>
            ))}
        </ul>
    );
}

export default VerticalScrollView;
