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

const DROPDOWN_GUIDE = {
  summary:
    'Only label and items are required on DropdownButton. All other props are optional (defaults: variant secondary, outline false, disabled false, align start, closeOnItemClick true).',
  propsOverview:
    'Required: label (ReactNode), items (array of actions or { type: "divider" }). Optional: variant, size, outline, disabled, align, menuWidth, closeOnItemClick, ariaLabel, className. Each item: label, onClick?, href?, disabled?, endAdornment?.',
  features: ['Use type: "divider" between groups'],
  codeLabel: 'Full example (label + items required)',
  code: `import { DropdownButton } from 'ccl-ui-components-react';

<DropdownButton
  label="Account"
  variant="secondary"
  outline={false}
  disabled={false}
  align="start"
  menuWidth={240}
  closeOnItemClick={true}
  ariaLabel="Account menu"
  className=""
  items={[
    { label: 'Profile', onClick: () => {} },
    { label: 'Settings', onClick: () => {}, disabled: false },
    { type: 'divider' },
    { label: 'Sign out', onClick: () => {} },
  ]}
/>`,
} as const;

export default function DropdownPage() {
  return (
    <DemoPageWithGuide guide={DROPDOWN_GUIDE}>
    <main className="demo demo-page">
      <h1>Dropdown</h1>
      <p className="demo-lead">Dropdown button menus with variants, sizes, and alignment.</p>

      <section className="demo-section">
        <h2>DropdownButton</h2>
        <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'center' }}>
          <DropdownButton
            label="Dropdown button"
            variant="secondary"
            items={[
              { label: 'Action', onClick: () => console.log('Action') },
              { label: 'Another action', onClick: () => console.log('Another action') },
              { label: 'Something else here', onClick: () => console.log('Something else') },
              { type: 'divider' },
              { label: 'Separated link', href: '#' },
            ]}
          />

          <DropdownButton
            label="Align end"
            variant="primary"
            align="end"
            items={[
              { label: 'Profile', onClick: () => console.log('Profile') },
              { label: 'Settings', onClick: () => console.log('Settings') },
              { type: 'divider' },
              { label: 'Logout', onClick: () => console.log('Logout') },
            ]}
          />
        </div>
      </section>
    </main>
    </DemoPageWithGuide>
  );
}