import React from 'react';

type LoadingProps = {
  size?: 'sm' | 'md' | 'lg';
  text?: string;
};

/**
 * Loading spinner component
 */
const Loading = ({ size = 'md', text }: LoadingProps) => {
  const sizeClasses = {
    sm: 'h-4 w-4',
    md: 'h-8 w-8',
    lg: 'h-12 w-12',
  };

  return (
    <div className="flex flex-col items-center justify-center p-4">
      <div
        className={`${sizeClasses[size]} animate-spin rounded-full border-4 border-gray-200 dark:border-zinc-700 border-t-blue-600 dark:border-t-blue-500`}
        role="status"
        aria-label="Loading"
      />
      {text && <p className="mt-2 text-sm text-gray-600 dark:text-zinc-400">{text}</p>}
    </div>
  );
};

export default Loading;