import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "../../lib/utils"

const skeletonVariants = cva(
  "",
  {
    variants: {
      rounded: {
        sm: "rounded-sm",
        md:"rounded-md",
        lg:"rounded-lg",
        full:"rounded-full"
      },
      color: {
        default: "bg-primary/20",
        slate: "bg-accent",
      },
      size:{
        sm:'w-[50px] h-[10px]',
        md:'w-[200px] h-[40px]',
        round:'w-[50px] h-[50px]'
      }
    },
  }
)

function Skeleton({
  rounded,
  color,
  size,
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof skeletonVariants>) {
  return (
    <div
      className={cn(skeletonVariants({rounded , color , size}),"animate-pulse ", className)}
      {...props}
    />
  )
}

export { Skeleton }
