import clsx from '../../../utils/clsx';

const SkeletonLoader = ({
    id,
    style,
    className,
    width,
    height,
    animationSpeed = 1.5,
    rounded = 'md',
}) => {
    const combinedStyle = {
        width,
        height,
        ...style,
        '--rbfb-skl-animation-speed': `${animationSpeed}s`,
    };

    const classes = clsx(
        'rbfb-skeleton-loader',
        'rbfb-skeleton-loader--loading',
        `rounded-${rounded}`,
        className,
    );

    return <div id={id} style={combinedStyle} className={classes} />;
};

export default SkeletonLoader;
