Spinner

import { Spinner } from '@akitectio/aki-ui'

function BasicSpinner() {
  return <Spinner />
}

// Different sizes
<Spinner size="sm" />   // Small
<Spinner size="md" />   // Medium (default)
<Spinner size="lg" />   // Large
<Spinner size="xl" />   // Extra Large

// Different colors
<Spinner color="primary" />
<Spinner color="success" />
<Spinner color="warning" />
<Spinner color="danger" />
<Spinner color="gray" />

// With label
<Spinner label="Loading..." />
<Spinner label="Saving changes..." color="success" />
<Spinner label="Processing your request..." color="purple" />

function LoadingButton() {
  const [isLoading, setIsLoading] = useState(false)
  
  const handleSubmit = async () => {
    setIsLoading(true)
    try {
      await submitForm()
    } finally {
      setIsLoading(false)
    }
  }
  
  return (
    <button 
      onClick={handleSubmit}
      disabled={isLoading}
      className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded"
    >
      {isLoading && <Spinner size="sm" color="white" />}
      <span>{isLoading ? 'Loading...' : 'Save Changes'}</span>
    </button>
  )
}

function OverlaySpinner({ isLoading, children }) {
  return (
    <div className="relative">
      {children}
      {isLoading && (
        <div className="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center">
          <div className="text-center">
            <Spinner size="lg" />
            <p className="mt-2 text-gray-600">Loading content...</p>
          </div>
        </div>
      )}
    </div>
  )
}