---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import Toast from '@components/demo/Toast.astro'
import DocsLink from '@ui/DocsLink.astro'
---

<DefaultLayout title="Toasts" pageMenu="base.toasts" description="Toasts show a brief, dismissible notification in the corner of the screen.">
  <DocsLink slot="page-header-actions" path="/ui/components/toast" />

  <Card>
    <CardBody>
      <ButtonList>
        <Button text="Simple toast" toastId="simple" />
        <Button text="Cookies toast" toastId="cookies" />
      </ButtonList>
    </CardBody>
  </Card>

  <div class="toast-container position-fixed bottom-0 end-0 p-3">
    <Toast toastId="simple" show={false} />
    <Toast toastId="cookies" show={false} cookies />
  </div>
</DefaultLayout>