import React from 'react'
import type { SkeletonProps } from './skeleton'

import { classNames } from '../../utils/classNames'

import styles from './skeleton.module.scss'

export type Props = SkeletonProps

const Skeleton = ({
    animate = 'wave',
    type = 'rounded',
    width,
    height,
    color,
    waveColor,
    className
}: Props) => {
    const classes = classNames([
        animate && styles[animate],
        styles[type],
        styles.skeleton,
        className
    ])

    const styleVariables = {
        ...(width && { maxWidth: `${width}px` }),
        ...(height && { maxHeight: `${height}px` }),
        ...(color && { '--w-skeleton-color': color }),
        ...(waveColor && { '--w-skeleton-wave-color': waveColor })
    } as React.CSSProperties

    return <div className={classes} style={styleVariables}>&nbsp;</div>
}

export default Skeleton