import React from 'react';
import { clsx } from 'clsx';
import Spinner from './Spinner';
import { Text } from './Typography';

export interface LoadingStateProps {
  message?: string;
  size?: 'sm' | 'md' | 'lg';
  className?: string;
  fullHeight?: boolean;
}

/**
 * LoadingState component for consistent loading displays
 */
export const LoadingState: React.FC<LoadingStateProps> = ({
  message,
  size = 'md',
  className,
  fullHeight = false,
}) => {
  const spinnerSizes = {
    sm: 'h-4 w-4',
    md: 'h-6 w-6',
    lg: 'h-8 w-8',
  };

  return (
    <div
      className={clsx(
        'flex items-center justify-center',
        fullHeight ? 'min-h-96' : 'py-8',
        className
      )}
    >
      <div className="flex flex-col items-center gap-3">
        <Spinner className={clsx(spinnerSizes[size], 'text-primary')} />
        {message && <Text variant="muted">{message}</Text>}
      </div>
    </div>
  );
};