"use client"
import React from "react"
import { tv } from "tailwind-variants"
import { type VariantProps } from "tailwind-variants"
import { BorderColorVariantProps } from "../../styles"
import { classNames } from "../../utils"

export type SpinnerProps = { className?: string } & VariantProps<
  typeof spinnerVariants
> &
  BorderColorVariantProps

const spinnerVariants = tv({
  variants: {
    size: {
      "2xs": "size-3 border-2",
      xs: "size-4 border-2",
      sm: "size-6 border-[3px]",
      md: "size-12 border-4",
      lg: "size-[72px] border-[5px]",
    },
  },
})

export const Spinner = ({ className, size = "sm" }: SpinnerProps) => {
  return (
    <span
      aria-live="polite"
      className={classNames(
        "inline-block animate-spin rounded-full",
        "!border-b-transparent",
        spinnerVariants({
          size,
        }),
        // Default to sm spinners on mobile only, except for when it's explicitly set to xs
        size !== "xs" && "xs:max-sm:size-6 xs:max-sm:border-[3px]",
        "border-current",
        className,
      )}
      role="status"
    />
  )
}