import { forwardRef } from 'react'
import type { HTMLAttributes } from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const skeletonVariants = cva('animate-pulse bg-fill-tertiary', {
  variants: {
    rounded: {
      default: 'rounded-md',
      circle: 'rounded-full',
    },
  },
  defaultVariants: { rounded: 'default' },
})

export interface SkeletonProps
  extends HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof skeletonVariants> {
  rounded?: 'default' | 'circle'
}

export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
  ({ className, rounded = 'default', ...props }, ref) => (
    <div
      ref={ref}
      className={cn(skeletonVariants({ rounded }), className)}
      {...props}
    />
  )
)
Skeleton.displayName = 'Skeleton'

export { skeletonVariants }