import { useState } from 'react'
import Alert from '../Alert'
import Div from '../Div'
import Row from '../Row'
import Br from '../Br'
import Button from '../Button'
import { Sandbox } from '@startupjs/docs'
import { faFire, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons'

# Alert

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

```jsx
import { Alert } from '@startupjs/ui'
```

## Simple example
```jsx example
return (
  <Alert>
    Message
  </Alert>
)
```

## Variants

The alert offers four severity levels that set a distinctive icon and color: `success`, `info`, `warning`, `error`. You can specify it by passing `variant` property.

```jsx example
return (
  <Div>
    <Alert variant='info'>
      This is an info alert — check it out!
    </Alert>
    <Br />
    <Alert variant='success'>
      This is an success alert — check it out!
    </Alert>
    <Br />
    <Alert variant='warning'>
      This is an warning alert — check it out!
    </Alert>
    <Br />
    <Alert variant='error'>
      This is an error alert — check it out!
    </Alert>
  </Div>
)
```

## Title

You can use the `title` property to display the title above the content.

```jsx example
return (
  <Div>
    <Alert
      variant='info'
      title='Info'
    >
      This is an info alert — check it out!
    </Alert>
    <Br />
    <Alert
      variant='success'
      title='Success'
    >
      This is an success alert — check it out!
    </Alert>
    <Br />
    <Alert
      variant='warning'
      title='Warning'
    >
      This is an warning alert — check it out!
    </Alert>
    <Br />
    <Alert
      variant='error'
      title='Error'
    >
      This is an error alert — check it out!
    </Alert>
  </Div>
)
```


## Icons
The `icon` property allows you to change the icon at the beginning of the component.
The `variant` prop defines the corresponding color for the icon.

Setting the `icon` property to `false` will completely remove the icon.

```jsx example
return (
  <Div>
    <Alert
      icon={faFire}
      variant='error'
    >
      Error alert with custom icon
    </Alert>
    <Br />
    <Alert
      icon={false}
      variant='warning'
    >
      Warning alert without icon
    </Alert>
  </Div>
)
```

## Actions

An alert can have an action (`onClose` prop). It is rendered after the message, at the end of the alert.

```jsx example
const [showFirstAlert, setShowFirstAlert] = useState(true)

return (
  <Div>
    {showFirstAlert && <Alert
      variant='warning'
      onClose={() => setShowFirstAlert(false)}
    >
      Warning alert with default actions
    </Alert>}
    <Br />
    <Button
      style={{ alignSelf: 'center' }}
      disabled={showFirstAlert}
      onPress={() => setShowFirstAlert(true)}
    >
      Re-Open
    </Button>
  </Div>
)
```

The `renderActions` prop can be used to provide an alternative action.

```jsx example
const [showSecondAlert, setShowSecondAlert] = useState(true)

const renderCustomCloseButton = () => {
  return (
    <Button
      color='success'
      variant='flat'
      size='s'
      onPress={() => setShowSecondAlert(false)}
    >
      CLOSE
    </Button>
  )
}

return (
  <Div>
    {showSecondAlert && <Alert
        variant='success'
        renderActions={renderCustomCloseButton}
      >
        Success alert with custom actions
      </Alert>}
    <Br />
    <Button
      style={{ alignSelf: 'center' }}
      disabled={showSecondAlert}
      onPress={() => setShowSecondAlert(true)}
    >
      Re-Open
    </Button>
  </Div>
)
```

## Sandbox

<Sandbox
  Component={Alert}
  extraParams={{
    icon: {
      showIconSelect: true
    }
  }}
  props={{
    children: 'Message content'
  }}
/>