import { __ } from '../lib/i18n';

type ScreenLoaderProps = {
  /**
   * `page` — initial shell / full view (centered vertically in the content area).
   * `section` — embedded panels with a modest minimum height.
   */
  variant?: 'page' | 'section';
  className?: string;
};

/** Subtle ring spinner for use inside existing flex-centered containers (e.g. charts). */
export function LoadingSpinner({ className = '' }: { className?: string }) {
  return (
    <div
      role="status"
      aria-label={__('Loading', 'llmagnet-llm-txt-generator')}
      className={`llmagnet-react-shell__spinner shrink-0 ${className}`}
    />
  );
}

function ShellSkeleton() {
  return (
    <div className="llmagnet-react-shell__skeleton" aria-hidden="true">
      <div className="llmagnet-react-shell__bar" />
      <div className="llmagnet-react-shell__block" />
      <div className="llmagnet-react-shell__block llmagnet-react-shell__block--short" />
    </div>
  );
}

/**
 * Matches PHP placeholder (admin-react-shell.css): soft skeleton + spinner on admin gray background.
 */
export function ScreenLoader({ variant = 'page', className = '' }: ScreenLoaderProps) {
  const section = variant === 'section';
  const rootClass = [
    'llmagnet-react-shell',
    section ? 'llmagnet-react-shell--section' : '',
    className,
  ]
    .filter(Boolean)
    .join(' ');

  return (
    <div className={rootClass} role="status" aria-label={__('Loading', 'llmagnet-llm-txt-generator')}>
      <div className="llmagnet-react-shell__inner">
        <ShellSkeleton />
        <div className="llmagnet-react-shell__spinner" aria-hidden="true" />
      </div>
    </div>
  );
}