---
import type { Attribute } from "src/utils/attributes";
import TitleIcon from "./TitleIcon.astro";

interface Props extends Attribute {}

const { icon, title, values, withBorder = true, lang: titleLang } = Astro.props;

if (values.length === 0) return;
---

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

<div id="container">
  <TitleIcon title={title} icon={icon} lang={titleLang} />
  <div id="values" class:list={{ "with-border": withBorder }}>
    {
      values.map(({ name, href, lang }) =>
        href ? (
          <a class="pressable" href={href} lang={lang}>
            {name}
          </a>
        ) : (
          <div lang={lang}>{name}</div>
        )
      )
    }
  </div>
</div>

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

<style>
  #container {
    display: flex;
    gap: 0.5em 1em;
    flex-wrap: wrap;

    & > #values {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      place-items: center;
      translate: 0px 3px;

      &.with-border {
        & > div,
        & > a {
          border-radius: 9999px;
          padding-bottom: 0.25em;
          padding-top: 0.15em;
          padding-inline: 0.6em;
          border-width: 1px;
        }

        & > div {
          border: 1px solid var(--color-base-1000);
        }
      }
    }
  }
</style>