"use strict";

import React from "react";

import { Alert, Button } from "../../";

export default (
  <div className="m-5">
    <Alert
      {...{
        dismissible: true,
        onClose: () => console.log("close alert with variant: primary")
      }}
    >
      <Alert.Header>Well done!</Alert.Header>
      <p>
        <strong>Holy guacamole!</strong> You can see «Alert» with «Header»!
      </p>
    </Alert>

    <Alert
      {...{
        variant: "secondary",
        dismissible: true,
        onClose: () => console.log("close alert with variant: secondary")
      }}
    >
      <Alert.Header>Well done!</Alert.Header>
      <p>
        <strong>Holy guacamole!</strong> You can see «Alert» with «Header» and «Link» at right this
        text! <Alert.Link href="#secondary1">An example link 1</Alert.Link>
      </p>
    </Alert>

    <Alert
      {...{
        variant: "success",
        dismissible: true,
        onClose: () => console.log("close alert with variant: success")
      }}
    >
      <Alert.Header>Well done!</Alert.Header>
      <hr />
      <p>
        <strong>Holy guacamole!</strong> You can see «Alert» with «Header» and two «Links» at right
        this text and below! <Alert.Link href="#success1">An example link 1</Alert.Link>
      </p>
      <p>
        <Alert.Link href="#success2">An example link 2</Alert.Link>
      </p>
    </Alert>

    <Alert {...{ variant: "danger" }}>
      <Alert.Header>Well done!</Alert.Header>
      <hr />
      <p>
        <strong>Holy guacamole!</strong> You can see «Alert» with «Header», two «Links» and «Button»
        below right! <Alert.Link href="#danger1">An example link 1</Alert.Link>
      </p>
      <p>
        <Alert.Link href="#danger2">An example link 2</Alert.Link>
      </p>
      <div className="d-flex justify-content-end">
        <Button
          variant="danger"
          onClick={() => console.log("close alert with variant: danger, by button")}
        >
          Close me y'all!
        </Button>
      </div>
    </Alert>
  </div>
);