import { ProgressBar, CircularProgress } from '../../lib';
import { DemoPageWithGuide } from '../DemoPageWithGuide';

const PROGRESS_GUIDE = {
  summary:
    'ProgressBar and CircularProgress only require value (0–100 by default max 100). Every other prop is optional with defaults (e.g. ProgressBar size md, CircularProgress size 56, thickness 6, showLabel true on circular).',
  propsOverview:
    'ProgressBar optional: max, color, size, striped, animatedStripes, animated, label, showLabel, ariaLabel, className, HTMLAttributes. CircularProgress optional: max, color, size, thickness, showLabel, label, ariaLabel, className, HTMLAttributes.',
  features: ['animated on ProgressBar runs a width animation on mount'],
  codeLabel: 'Full example (value required)',
  code: `import { ProgressBar, CircularProgress } from 'ccl-ui-components-react';

<ProgressBar
  value={40}
  max={100}
  color="primary"
  size="md"
  striped={false}
  animatedStripes={false}
  animated={false}
  showLabel={false}
  label=""
  ariaLabel=""
  className=""
/>
<CircularProgress
  value={62}
  max={100}
  color="primary"
  size={56}
  thickness={6}
  showLabel={true}
  label=""
  ariaLabel=""
  className=""
/>`,
} as const;

export default function ProgressPage() {
  return (
    <DemoPageWithGuide guide={PROGRESS_GUIDE}>
    <main className="demo demo-page">
      <h1>Progress bars</h1>
      <p className="demo-lead">Linear progress bars and circular progress indicators.</p>

      <section className="demo-section">
        <h2>Default examples</h2>
        <div style={{ display: 'grid', gap: 16 }}>
          <ProgressBar value={25} color="primary" />
          <ProgressBar value={50} color="primary" />
          <ProgressBar value={75} color="primary" />
          <ProgressBar value={100} color="primary" />
        </div>
      </section>

      <section className="demo-section">
        <h2>Backgrounds</h2>
        <div style={{ display: 'grid', gap: 16 }}>
          <ProgressBar value={25} color="success" />
          <ProgressBar value={50} color="info" />
          <ProgressBar value={75} color="warning" />
          <ProgressBar value={100} color="danger" />
        </div>
      </section>

      <section className="demo-section">
        <h2>Labels</h2>
        <ProgressBar value={25} color="primary" showLabel />
      </section>

      <section className="demo-section">
        <h2>Height</h2>
        <div style={{ display: 'grid', gap: 14 }}>
          <div>
            <div className="demo-muted" style={{ marginBottom: 6 }}>
              Progress sm
            </div>
            <ProgressBar value={25} color="primary" size="sm" />
          </div>
          <div>
            <div className="demo-muted" style={{ marginBottom: 6 }}>
              Progress md
            </div>
            <ProgressBar value={40} color="success" size="md" />
          </div>
          <div>
            <div className="demo-muted" style={{ marginBottom: 6 }}>
              Progress lg
            </div>
            <ProgressBar value={50} color="warning" size="lg" />
          </div>
          <div>
            <div className="demo-muted" style={{ marginBottom: 6 }}>
              Progress xl
            </div>
            <ProgressBar value={70} color="danger" size="xl" />
          </div>
        </div>
      </section>

      <section className="demo-section">
        <h2>Striped / animated stripes</h2>
        <div style={{ display: 'grid', gap: 16 }}>
          <ProgressBar value={25} color="primary" striped />
          <ProgressBar value={40} color="success" striped />
          <ProgressBar value={75} color="primary" striped animatedStripes />
        </div>
      </section>

      <section className="demo-section">
        <h2>Animated progress</h2>
        <div style={{ display: 'grid', gap: 16 }}>
          <ProgressBar value={10} color="primary" animated />
          <ProgressBar value={25} color="success" animated />
          <ProgressBar value={50} color="info" animated />
          <ProgressBar value={75} color="warning" animated />
          <ProgressBar value={100} color="danger" animated />
        </div>
      </section>

      <section className="demo-section">
        <h2>Circular progress</h2>
        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
          <CircularProgress value={25} color="primary" />
          <CircularProgress value={50} color="success" />
          <CircularProgress value={75} color="warning" />
          <CircularProgress value={90} color="danger" size={72} thickness={8} />
          <CircularProgress value={62} color="info" showLabel={false} ariaLabel="Loading" />
        </div>
      </section>
    </main>
    </DemoPageWithGuide>
  );
}