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

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

const { getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);

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

{/* ------------------------------------------- HTML ------------------------------------------- */}

<div class="error-message">
  <Icon name="material-symbols:error-outline" width={32} height={32} />
  <p class="font-xl">{title}</p>
  {
    description ? (
      <p>{description}</p>
    ) : (
      <p>
        Please contact{" "}
        <a href={getLocalizedUrl("/discord")} target="_blank">
          website technical administrator
        </a>
        .
      </p>
    )
  }
</div>

{/* ------------------------------------------- CSS -------------------------------------------- */}

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