import React from 'react';
import { ListBox, SkeletonLoader } from '@theorchard/suite-components';

interface ListBoxLoaderProps {
    name: string;
    className?: string;
    filterPlaceholder: string;
    height?: number;
}

const LOADING_LINES_WIDTH = [10, 8, 5, 4, 7, 5, 4, 3, 5, 6, 4];

const ListBoxSkeleton = ({
    name,
    className,
    filterPlaceholder,
    height,
}: ListBoxLoaderProps) => {
    const options = LOADING_LINES_WIDTH.map((widthMultiplier, index) => ({
        value: `loader-${name}-${index}`,
        label: '',
        content: (
            <SkeletonLoader
                vertical
                numberOfItems={1}
                width={widthMultiplier * 25}
            />
        ),
    }));

    return (
        <ListBox
            testId={className}
            variant="static"
            options={options}
            height={height}
            filterPlaceholder={filterPlaceholder}
            components={{
                OptionLabel: ({ option: { content } }) => content,
            }}
        />
    );
};

export default ListBoxSkeleton;