import { Playground, Props } from "@slytrunk/docs";
import { Text } from "../Text";
import { Button } from "../Button";
import { Alert, AlertProvider } from "./Alert";

# Alert

Web implementation of React Native's Alert API.

```
Alert.alert(
    title: string,
    message?: string,
    buttons: AlertButton[] = [{ text: "OK" }],
    options: AlertOptions = {}
)
```

> NOTE: You must use `AlertProvider` when using Alert for web. If you are using mazlo-ui's `App`, then you are already using `AlertProvider`.

## Basic usage

<Playground>
  <Button variant="primary" onPress={() => Alert.alert("Hello World")}>
    <Text>Show Alert</Text>
  </Button>
  <AlertProvider />
</Playground>

## Title with message

<Playground>
  <Button
    variant="primary"
    onPress={() =>
      Alert.alert("Error", "Something unexpected happened. Please try again.")
    }
  >
    <Text>Show Alert</Text>
  </Button>
</Playground>

## Custom buttons

<Playground>
  <Button
    variant="primary"
    onPress={() =>
      Alert.alert("Do you really want to do this?", "", [
        { text: "Yes", style: "primary" },
        { text: "No" },
      ])
    }
  >
    <Text>Show Alert</Text>
  </Button>
</Playground>