import { Loader2Icon } from "lucide-react";

function cn(...classes: (string | undefined | null | false)[]): string {
  return classes.filter(Boolean).join(" ");
}

function Spinner({
  className,
  ...props
}: React.ComponentProps<typeof Loader2Icon>) {
  return (
    <Loader2Icon
      aria-label="Loading"
      className={cn("animate-spin", className)}
      role="status"
      {...props}
    />
  );
}

const sizes = [
  { label: "sm", className: "w-4 h-4" },
  { label: "md", className: "w-6 h-6" },
  { label: "lg", className: "w-8 h-8" },
  { label: "xl", className: "w-12 h-12" },
];

export default function SpinnerSizesDemo() {
  return (
    <div className="flex items-center justify-center w-full min-h-screen bg-background p-8 overflow-hidden">
      <div className="flex items-center gap-8">
        {sizes.map(({ label, className }) => (
          <div key={label} className="flex flex-col items-center gap-3">
            <Spinner className={cn(className, "text-foreground")} />
            <span className="text-xs text-muted-foreground">{label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}