# Alert

An alert message with an indicator of alert's type opportunity to pass a button

## Features

- **Variants**: Show different icons for context using default icons
- **Retry button**: Opportunity to pass a callback for button
- **Collapsible content**: Expandable/collapsible additional content with collapse button
- **Customization**: Opportunity to pass a custom icon

## Usage

```tsx
import {Alert} from '@/components/atoms/Alert';

// Different variant
<Alert text="Alert" variant="default" />;
<Alert text="Alert" variant="info" />;
<Alert text="Alert" variant="warning" />;
<Alert text="Alert" variant="error" />;

// Action
<Alert text="Alert" button={{content: 'Retry', onClick: () => {}}} />;

// Collapsible content
<Alert
  text="Error occurred"
  variant="error"
  content={
    <div>
      <p>Error details:</p>
      <pre>Error: Connection timeout</pre>
    </div>
  }
/>;
```

## Props

| Prop              | Type                                          | Required | Default     | Description                                   |
| ----------------- | --------------------------------------------- | -------- | ----------- | --------------------------------------------- |
| `text`            | `string`                                      | ✓        | -           | Content of alert                              |
| `variant`         | `'default' \| 'error' \| 'warning' \| 'info'` | -        | `'default'` | View                                          |
| `icon`            | `ReactNode`                                   | -        | -           | Custom icon                                   |
| `button`          | `{content: ReactNode, onClick: () => void}`   | -        | -           | Action button                                 |
| `content`         | `ReactNode`                                   | -        | -           | Collapsible content displayed below the alert |
| `initialExpanded` | `boolean`                                     | -        | `false`     | Initial state of collapsible content          |
| `className`       | `string`                                      | -        | -           | Additional CSS class                          |
| `qa`              | `string`                                      | -        | -           | QA/test identifier                            |

## Styling

The component uses CSS variables for theming:

| Variable                       | Description                              |
| ------------------------------ | ---------------------------------------- |
| `--g-color-text-danger`        | Icon color for `error` variant           |
| `--g-color-text-warning-heavy` | Icon color for `warning` variant         |
| `--g-color-text-info`          | Icon color for `info` variant            |
| `--g-spacing-2`                | Gap between header elements and sections |