import * as React from "react";
import { Spinner } from "./spinner";

export function SpinnerDemo() {
  return (
    <div className="flex flex-col space-y-8">
      {/* Basic spinner */}
      <div className="flex flex-col gap-2">
        <h3 className="text-lg font-medium">Default Spinner</h3>
        <div className="flex items-center justify-center h-16 border rounded">
          <Spinner />
        </div>
      </div>

      {/* Size variants */}
      <div className="flex flex-col gap-2">
        <h3 className="text-lg font-medium">Size Variants</h3>
        <div className="flex items-center justify-around h-24 border rounded">
          <div className="flex flex-col items-center gap-2">
            <Spinner size="small" />
            <span className="text-sm text-muted-foreground">Small</span>
          </div>
          <div className="flex flex-col items-center gap-2">
            <Spinner size="medium" />
            <span className="text-sm text-muted-foreground">
              Medium (default)
            </span>
          </div>
          <div className="flex flex-col items-center gap-2">
            <Spinner size="large" />
            <span className="text-sm text-muted-foreground">Large</span>
          </div>
        </div>
      </div>

      {/* With text */}
      <div className="flex flex-col gap-2">
        <h3 className="text-lg font-medium">With Text</h3>
        <div className="flex items-center justify-center h-24 border rounded">
          <Spinner>
            <p className="mt-2 text-sm text-muted-foreground">Loading...</p>
          </Spinner>
        </div>
      </div>

      {/* In a button-like context */}
      <div className="flex flex-col gap-2">
        <h3 className="text-lg font-medium">In Context</h3>
        <div className="flex items-center justify-around h-24 border rounded">
          <button
            type="button"
            disabled
            className="inline-flex items-center justify-center px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md opacity-70"
          >
            <Spinner size="small" className="mr-2 text-current" />
            Loading...
          </button>
          <div className="inline-flex items-center justify-center gap-2 px-4 py-2 border rounded-md">
            <Spinner size="small" className="text-primary" />
            <span>Fetching data</span>
          </div>
        </div>
      </div>
    </div>
  );
}