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,
    },
    display: {
      block: styles.block,
      "inline-block": styles.inlineBlock,
    },
  },
  defaultVariants: {
    contrast: "light",
    display: "inline-block",
  },
})

export default function SkeletonShimmer({
  className,
  height,
  width,
  contrast = "light",
  display = "inline-block",
}: {
  className?: string
  height?: string
  width?: string
  contrast?: "light" | "dark"
  display?: "block" | "inline-block"
}) {
  return (
    <span
      className={cx(className, variants({ contrast, display }))}
      style={{
        height: height,
        width: width,
        maxWidth: "100%",
      }}
    >
      {/* zero width space, allows for font styles to affect height */}
      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
      <span aria-hidden="true">&#8203;</span>
    </span>
  )
}