import * as React from "react"

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

export type LoaderVariant = "circular-progress"

export type LoaderSize = "sm" | "md" | "lg" | "xl"

const SIZE_CLASS: Record<LoaderSize, string> = {
  sm: "size-4",
  md: "size-8",
  lg: "size-10",
  xl: "size-12",
}

const BORDER_CLASS: Record<LoaderSize, string> = {
  sm: "border-2",
  md: "border-2",
  lg: "border-[3px]",
  xl: "border-[3px]",
}

export type LoaderProps = React.HTMLAttributes<HTMLDivElement> & {
  variant?: LoaderVariant
  size?: LoaderSize
}

export function Loader({
  variant = "circular-progress",
  size = "md",
  className,
  ...props
}: LoaderProps) {
  if (variant !== "circular-progress") {
    return null
  }

  return (
    <div
      role="status"
      aria-label="Loading"
      className={cn(
        "animate-spin rounded-full border-accent/20 border-t-accent",
        SIZE_CLASS[size],
        BORDER_CLASS[size],
        className,
      )}
      {...props}
    />
  )
}