/**
 * Re-export from the Ethos component library.
 * All existing imports continue to work.
 *
 * Note: `LoadingState` (spinner) has been replaced by Skeletons.
 * The export is preserved for backward compatibility.
 */
export { Skeleton, SkeletonRows, SkeletonGrid } from './ethos/Skeleton';

interface LoadingStateProps {
  label?: string;
  className?: string;
}

/**
 * Spinner-based loading — use only for unknown-duration waits.
 * Most pages should use SkeletonRows/SkeletonGrid instead.
 */
export function LoadingState({ label = 'Loading…', className = '' }: LoadingStateProps) {
  return (
    <div className={`flex items-center justify-center gap-2 py-10 text-sm text-muted ${className}`}>
      <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
      </svg>
      {label}
    </div>
  );
}
