---
import { Icon } from "astro-icon/components";

interface Props {
  title: string;
  description?: string;
}

const { title, description } = Astro.props;
---

<div>
  <Icon name="material-symbols:error-outline" width={32} height={32} />
  <p id="title">{title}</p>
  {description && <p>{description}</p>}
</div>

<style>
  @keyframes flashingRed {
    from {
      background-color: #ff000022;
    }

    to {
      background-color: #ff000033;
    }
  }

  div {
    color: var(--color-critical-error) !important;
    padding: 2em 2em !important;
    margin-block: 4em !important;
    border-radius: 1em;
    display: grid;
    place-items: center;

    animation: flashingRed;
    animation-duration: 0.5s;
    animation-direction: alternate;
    animation-iteration-count: infinite;

    & > #title {
      font-weight: 600;
      font-size: 120%;
    }
  }
</style>