import { Badge } from '../../lib';
import { DemoPageWithGuide } from '../DemoPageWithGuide';

const BADGE_GUIDE = {
  summary:
    'All Badge props are optional. Defaults: variant default, tone solid, label "", dismissible false, count null, clickable false, size md, thickness normal, disabled false.',
  propsOverview:
    'Optional: variant, tone, label, icon, dismissible, count, clickable, size, shape (pill is default when count is set), thickness, customColor, disabled, onDismiss, onClick, className, tabIndex, onKeyDown, and other div attributes.',
  features: ['Use count without label for numeric-only pills'],
  codeLabel: 'Full example (props optional)',
  code: `import { Badge } from 'ccl-ui-components-react';

<Badge
  variant="primary"
  tone="solid"
  label="New"
  icon=""
  count={null}
  dismissible={false}
  clickable={false}
  size="md"
  shape="rounded"
  thickness="normal"
  customColor=""
  disabled={false}
  onDismiss={() => {}}
  onClick={() => {}}
  className=""
/>`,
} as const;

export default function BadgePage() {
  return (
    <DemoPageWithGuide guide={BADGE_GUIDE}>
    <main className="demo demo-page">
      <h1>Badge</h1>
      <p className="demo-lead">Badges: solid, soft, pill, counts, and dismissible.</p>
      <section className="demo-section">
        <h2>Variants</h2>
        <div className="demo-row" style={{ flexWrap: 'wrap', gap: '0.5rem', justifyContent: 'center' }}>
          <Badge label="default" variant="default" />
          <Badge label="secondary" variant="secondary" />
          <Badge label="primary" variant="primary" />
          <Badge label="success" variant="success" />
          <Badge label="danger" variant="danger" />
          <Badge label="warning" variant="warning" />
          <Badge label="info" variant="info" />
          <Badge label="light" variant="light" />
          <Badge label="dark" variant="dark" />
          <Badge count={12} variant="error" />
        </div>
      </section>

      <section className="demo-section">
        <h2>Soft badges</h2>
        <div className="demo-row" style={{ flexWrap: 'wrap', gap: '0.5rem', justifyContent: 'center' }}>
          <Badge label="primary" variant="primary" tone="soft" />
          <Badge label="success" variant="success" tone="soft" />
          <Badge label="info" variant="info" tone="soft" />
          <Badge label="warning" variant="warning" tone="soft" />
          <Badge label="danger" variant="danger" tone="soft" />
          <Badge label="dark" variant="dark" tone="soft" />
        </div>
      </section>

      <section className="demo-section">
        <h2>Pill badges</h2>
        <div className="demo-row" style={{ flexWrap: 'wrap', gap: '0.5rem', justifyContent: 'center' }}>
          <Badge label="primary" variant="primary" shape="pill" />
          <Badge label="success" variant="success" shape="pill" />
          <Badge label="info" variant="info" shape="pill" />
          <Badge label="warning" variant="warning" shape="pill" />
          <Badge label="danger" variant="danger" shape="pill" />
          <Badge label="dark" variant="dark" shape="pill" />
        </div>
        <div className="demo-row" style={{ flexWrap: 'wrap', gap: '0.5rem', justifyContent: 'center', marginTop: '0.75rem' }}>
          <Badge label="primary" variant="primary" shape="pill" tone="soft" />
          <Badge label="success" variant="success" shape="pill" tone="soft" />
          <Badge label="info" variant="info" shape="pill" tone="soft" />
          <Badge label="warning" variant="warning" shape="pill" tone="soft" />
          <Badge label="danger" variant="danger" shape="pill" tone="soft" />
          <Badge label="dark" variant="dark" shape="pill" tone="soft" />
        </div>
      </section>
      <section className="demo-section">
        <h2>Thickness</h2>
        <div className="demo-row" style={{ flexWrap: 'wrap', gap: '0.5rem', justifyContent: 'center' }}>
          <Badge label="thin" variant="primary" thickness="thin" />
          <Badge label="normal" variant="primary" thickness="normal" />
          <Badge label="thick" variant="primary" thickness="thick" />
        </div>
      </section>
      <section className="demo-section">
        <h2>Dismissible</h2>
        <div className="demo-row" style={{ justifyContent: 'center' }}>
          <Badge label="Dismiss me" variant="primary" dismissible onDismiss={() => {}} />
        </div>
      </section>
      <section className="demo-section">
        <h2>Count badges (pill)</h2>
        <p className="demo-muted" style={{ marginBottom: '1rem' }}>
          With <code>count</code>, the badge defaults to a <strong>pill</strong> shape. Overlay it on your own icon or
          button in your app; here only the badge is shown.
        </p>
        <div className="demo-row" style={{ flexWrap: 'wrap', gap: '0.75rem', justifyContent: 'center', alignItems: 'center' }}>
          <Badge count={3} variant="danger" size="sm" />
          <Badge count={42} variant="danger" size="md" />
          <Badge count={1500} variant="primary" size="sm" />
        </div>
      </section>
    </main>
    </DemoPageWithGuide>
  );
}