import { Loading, type LoadingColor, type LoadingThickness } from '../../lib';
import { DemoPageWithGuide } from '../DemoPageWithGuide';

const THICKNESS: LoadingThickness[] = ['thin', 'normal', 'thick'];

const COLORS: LoadingColor[] = [
  'primary',
  'secondary',
  'success',
  'danger',
  'warning',
  'info',
  'light',
  'dark',
];

const LOADING_GUIDE = {
  summary:
    'All Loading props are optional. Defaults: variant spinner, size md, color primary, thickness normal, animated true, label "Loading…".',
  propsOverview:
    'Optional: variant, size, color, thickness, animated, label (visually hidden text for assistive tech), className, role, style, and other HTMLAttributes on the wrapper.',
  features: ['Pass aria-label in consuming apps if you replace the default label'],
  codeLabel: 'Full example (props optional)',
  code: `import { Loading } from 'ccl-ui-components-react';

<Loading
  variant="spinner"
  size="md"
  color="primary"
  thickness="normal"
  animated={true}
  label="Loading…"
  className=""
/>`,
} as const;

export default function LoadingPage() {
  return (
    <DemoPageWithGuide guide={LOADING_GUIDE}>
    <main className="demo demo-page">
      <h1>Loading</h1>
      <p className="demo-lead">Spinner, bar, and pulse loading indicators.</p>
      <section className="demo-section">
        <h2>Thickness (spinner ring + pulse dots)</h2>
        <div className="demo-row" style={{ flexWrap: 'wrap', gap: '1.5rem', justifyContent: 'center', alignItems: 'center' }}>
          {THICKNESS.map((t) => (
            <div key={t} style={{ textAlign: 'center' }}>
              <div style={{ fontSize: '0.75rem', marginBottom: 6, color: 'var(--text, #666)' }}>{t}</div>
              <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center' }}>
                <Loading variant="spinner" thickness={t} color="primary" aria-label={`${t} spinner`} />
                <Loading variant="pulse" thickness={t} color="primary" aria-label={`${t} pulse`} />
              </div>
            </div>
          ))}
        </div>
      </section>
      <section className="demo-section">
        <h2>Spinner</h2>
        <div className="demo-row" style={{ flexWrap: 'wrap', gap: '1rem', justifyContent: 'center' }}>
          {COLORS.map((c) => (
            <Loading key={c} variant="spinner" color={c} aria-label={`${c} spinner`} />
          ))}
        </div>
      </section>
      <section className="demo-section">
        <h2>Bar</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', alignItems: 'center' }}>
          {COLORS.map((c) => (
            <Loading key={c} variant="bar" color={c} aria-label={`${c} bar`} />
          ))}
        </div>
      </section>
      <section className="demo-section">
        <h2>Pulse</h2>
        <div className="demo-row" style={{ flexWrap: 'wrap', gap: '1rem', justifyContent: 'center' }}>
          {COLORS.map((c) => (
            <Loading key={c} variant="pulse" color={c} aria-label={`${c} pulse`} />
          ))}
        </div>
      </section>
    </main>
    </DemoPageWithGuide>
  );
}