---
import { getI18n } from "src/i18n/i18n";
import type { EndpointSource } from "src/shared/payload/payload-sdk";

interface Props {
  source: EndpointSource;
}

const { source } = Astro.props;
const { formatEndpointSource } = await getI18n(Astro.locals.currentLocale);

const {
  href,
  typeLabel,
  label,
  target = undefined,
  rel = undefined,
  lang,
} = formatEndpointSource(source);
---

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

<a href={href} target={target} rel={rel}>
  <div class="font-xs">{typeLabel}</div><p lang={lang}>{label}</p>
</a>

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

<style>
  a {
    display: flex;
    flex-wrap: wrap;
    place-items: center;
    gap: 0.1em 0.3em;

    & > p {
      text-decoration: underline dotted 0.1em;
      text-decoration-color: transparent;

      transition-duration: 150ms;
      transition-property: text-decoration-color, color;

      line-height: 1.2;
    }

    border-radius: 16px;
    padding: 4px 10px;
    margin: -4px -10px;

    &:hover > p,
    &:focus-visible > p {
      color: var(--color-base-750);
      text-decoration-color: var(--color-base-650);
    }

    &:focus-visible {
      outline-width: 1.5 px;
    }

    &:active > p {
      color: var(--color-base-650);
      text-decoration-color: var(--color-base-550);
    }

    & > div {
      background-color: var(--color-base-300);
      border-radius: 9999px;
      padding: 0.3em 0.6em;
      flex-shrink: 0;
      margin-left: -0.5em;
    }
  }
</style>