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

const ALERT_GUIDE = {
  summary:
    'All Alert props are optional (message defaults to ""). Defaults: variant info, dismissible false, showIcon true, thickness normal.',
  propsOverview:
    'Optional: variant, message, title, dismissible, showIcon, icon (string override), thickness, onClose (used when dismissible), className (via rest if extended).',
  features: ['variant "error" maps to danger styling'],
  codeLabel: 'Full example (props optional)',
  code: `import { Alert } from 'ccl-ui-components-react';

<Alert
  variant="info"
  title=""
  message="Something happened."
  dismissible={false}
  showIcon={true}
  icon=""
  thickness="normal"
  onClose={() => {}}
  className=""
/>`,
} as const;

export default function AlertPage() {
  return (
    <DemoPageWithGuide guide={ALERT_GUIDE}>
    <main className="demo demo-page">
      <h1>Alert</h1>
      <p className="demo-lead">Alerts with variants and optional thickness.</p>
      <section className="demo-section">
        <Alert variant="primary" title="Primary" message="Primary alert example." />
        <Alert variant="secondary" title="Secondary" message="Secondary context." />
        <Alert variant="success" title="Success" message="Operation completed." />
        <Alert variant="danger" title="Danger" message="Something failed." />
        <Alert variant="warning" message="Proceed with caution." />
        <Alert variant="info" title="Info" message="Something you should know." />
        <Alert variant="light" title="Light" message="Subtle on light backgrounds." />
        <Alert variant="dark" title="Dark" message="Higher-contrast panel style." />
        <Alert variant="error" message="Legacy `error` maps to danger." dismissible onClose={() => {}} />
      </section>
      <section className="demo-section">
        <h2>Thickness</h2>
        <Alert variant="primary" thickness="thin" title="Thin" message="Tighter padding, 1px border." />
        <Alert variant="primary" thickness="normal" title="Normal" message="Default spacing density." />
        <Alert variant="primary" thickness="thick" title="Thick" message="Heavier border and more padding." />
      </section>
    </main>
    </DemoPageWithGuide>
  );
}