import { Button } from '../../lib';
import type { ButtonVariant } from '../../lib';
import { DemoPageWithGuide } from '../DemoPageWithGuide';

const BUTTON_GUIDE = {
  summary:
    'All typed Button props are optional. Defaults: variant primary, outline false, loading false, loadingIndicator spinner (also pulse bars, three dots, or single dot pulse), disabled false, type "button". For a text button you usually pass children; for icon-only use ariaLabel.',
  propsOverview:
    'Optional: variant, size (sm | lg), outline, loading, loadingIndicator (spinner | pulse | dots | dot), disabled, ariaLabel, ariaDescribedBy, ariaExpanded, ariaPressed, onClick, type, className, children, and any other valid native button attribute spread onto the element.',
  features: [
    'Loading: spinner, bar pulse, three-dot pulse, or single-dot pulse; all disable clicks and set aria-busy',
    'Outline uses the same variant color tokens',
  ],
  codeLabel: 'Full example (props optional)',
  code: `import { Button } from 'ccl-ui-components-react';

<Button
  variant="primary"
  size="lg"
  outline={false}
  loading={false}
  loadingIndicator="spinner"
  disabled={false}
  type="button"
  ariaLabel=""
  ariaDescribedBy=""
  onClick={() => {}}
  className=""
>
  Save
</Button>`,
} as const;

const variants: ButtonVariant[] = [
  'primary',
  'secondary',
  'success',
  'danger',
  'warning',
  'info',
  'light',
  'dark',
  'link',
];

export default function ButtonPage() {
  return (
    <DemoPageWithGuide guide={BUTTON_GUIDE}>
    <main className="demo demo-page">
      <h1>Button</h1>
      <p className="demo-lead">Solid and outline variants, sizes, and loading state.</p>

      {/* Solid variants */}
      <section className="demo-section">
        <h2>Solid variants</h2>
        <div className="demo-row" style={{ gap: '0.5rem', flexWrap: 'wrap' }}>
          {variants.map((v) => (
            <Button key={v} variant={v}>
              {v.charAt(0).toUpperCase() + v.slice(1)}
            </Button>
          ))}
        </div>
      </section>

      {/* Outline variants */}
      <section className="demo-section">
        <h2>Outline variants</h2>
        <div className="demo-row" style={{ gap: '0.5rem', flexWrap: 'wrap' }}>
          {variants
            .filter((v) => v !== 'link')
            .map((v) => (
              <Button key={v} variant={v} outline>
                {v.charAt(0).toUpperCase() + v.slice(1)}
              </Button>
            ))}
        </div>
      </section>

      {/* Sizes */}
      <section className="demo-section">
        <h2>Sizes</h2>
        <div className="demo-row" style={{ gap: '0.5rem', alignItems: 'center' }}>
          <Button variant="primary" size="sm">Small</Button>
          <Button variant="primary">Default</Button>
          <Button variant="primary" size="lg">Large</Button>
        </div>
      </section>

      {/* Disabled */}
      <section className="demo-section">
        <h2>Disabled</h2>
        <div className="demo-row" style={{ gap: '0.5rem', flexWrap: 'wrap' }}>
          <Button variant="primary" disabled>Primary</Button>
          <Button variant="secondary" disabled>Secondary</Button>
          <Button variant="success" outline disabled>Outline</Button>
        </div>
      </section>

      {/* Loading */}
      <section className="demo-section">
        <h2>Loading</h2>
        <div className="demo-row" style={{ gap: '0.5rem', flexWrap: 'wrap' }}>
          <Button variant="primary" loading>
            Spinner (default)
          </Button>
          <Button variant="secondary" loading>
            Spinner
          </Button>
          <Button variant="primary" loading loadingIndicator="pulse">
            Pulse bars
          </Button>
          <Button variant="success" outline loading loadingIndicator="pulse">
            Pulse outline
          </Button>
          <Button variant="primary" loading loadingIndicator="dot">
            Single dot pulse
          </Button>
          <Button variant="secondary" outline loading loadingIndicator="dot">
            Single dot outline
          </Button>
          <Button variant="primary" loading loadingIndicator="dots">
            Three dots
          </Button>
          <Button variant="info" outline loading loadingIndicator="dots">
            Dots outline
          </Button>
        </div>
      </section>
    </main>
    </DemoPageWithGuide>
  );
}