import { cn } from '@/utils';
import * as React from 'react';
import { BaseSkeleton } from './BaseSkeleton';
import styles from './Skeleton.module.css';

export interface SkeletonProps
  extends React.ComponentPropsWithoutRef<typeof BaseSkeleton> {
  variant?: string; // Add any additional props here
}

const Skeleton = React.forwardRef<
  React.ElementRef<typeof BaseSkeleton>,
  SkeletonProps
>(({ className, variant, ...props }, ref) => (
  <BaseSkeleton
    ref={ref}
    className={cn(
      styles.Skeleton,
      `${className} ${variant ? styles[variant] : ''}`,
    )}
    {...props}
  />
));

Skeleton.displayName = 'Skeleton';

export { Skeleton };
