import React from 'react';
import { clsx } from 'clsx';

import { forwardRef } from '../utils/react';
import { Box } from '../box';
import * as css from './skeleton.css';

/*-- Types --*/

export interface SkeletonProps extends css.SkeletonVariants {
  children?: never;
}

/*-- Main --*/

export const Skeleton = forwardRef<'div', SkeletonProps>(function Skeleton(
  { children, className, height = 'md', ...rest },
  ref,
) {
  return (
    <Box
      ref={ref}
      className={clsx(className, css.skeleton({ height }))}
      {...rest}
    >
      {children}
    </Box>
  );
});