import { type ReactElement, type ComponentProps } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { LoaderCircle } from "lucide-react"
import { cn } from "@/lib/utils"

/**
 * Spinner — WealthX Design System
 * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn?node-id=1196-1174
 *
 * Built on lucide-react LoaderCircle + animate-spin.
 * Color inherits from parent via currentColor — use text-* to style.
 * Sizes: sm (12px) | default (16px) | lg (24px) | xl (32px)
 */
const spinnerVariants = cva("animate-spin shrink-0", {
  variants: {
    size: {
      sm:      "size-3",
      default: "size-4",
      lg:      "size-6",
      xl:      "size-8",
    },
  },
  defaultVariants: {
    size: "default",
  },
})

export type SpinnerProps = ComponentProps<"svg"> & VariantProps<typeof spinnerVariants>

function Spinner({ className, size, ...props }: SpinnerProps): ReactElement {
  return (
    <LoaderCircle
      aria-hidden="true"
      className={cn(spinnerVariants({ size }), className)}
      data-slot="spinner"
      {...props}
    />
  )
}

export { Spinner, spinnerVariants }