import { cva, cx } 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({
  className,
  height,
  width,
  contrast = "light",
  display = "initial",
}: {
  className?: string
  height?: string
  width?: string
  contrast?: "light" | "dark"
  display?: "block" | "inline-block" | "initial"
}) {
  return (
    <span
      className={cx(className, variants({ contrast }))}
      style={{
        height: height,
        width: width,
        maxWidth: "100%",
        display: display,
      }}
    >
      {/* zero width space, allows for font styles to affect height */}
      <span aria-hidden="true">&#8203;</span>
    </span>
  )
}