import { cva } from "class-variance-authority"

import styles from "./skeleton.module.css"

const variants = cva(styles.shimmer, {
  variants: {
    contrast: {
      light: styles.light,
      dark: styles.dark,
    },
  },
  defaultVariants: {
    contrast: "light",
  },
})

export default function SkeletonShimmer({
  height,
  width,
  contrast = "light",
}: {
  height?: string
  width?: string
  contrast?: "light" | "dark"
}) {
  return (
    <span
      className={variants({ contrast })}
      style={{
        height: height,
        width: width,
        maxWidth: "100%",
      }}
    />
  )
}