import * as React from 'react'
import { cn } from '@/lib/utils'

interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: 'text' | 'circular' | 'rectangular'
  width?: string | number
  height?: string | number
}

const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
  ({ className, variant = 'rectangular', width, height, style, ...props }, ref) => {
    const baseClass =
      variant === 'circular'
        ? 'rounded-full'
        : variant === 'text'
          ? 'rounded'
          : 'rounded-card'
    return (
      <div
        ref={ref}
        className={cn(
          'animate-pulse bg-surface-raised',
          baseClass,
          className
        )}
        style={{ width, height, ...style }}
        {...props}
      />
    )
  }
)
Skeleton.displayName = 'Skeleton'

export { Skeleton }
