---
import { Icon } from "astro-icon/components";
import type { Attribute } from "src/utils/attributes";

interface Props extends Attribute {}

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

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

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

<div id="container">
  <div id="title">
    <Icon name={icon} width={24} height={24} />
    <p>{title}</p>
  </div>
  <div id="values" class:list={{ "with-border": withBorder }}>
    {
      values.map(({ name, href }) =>
        href ? (
          <a class="pressable high-contrast-text" href={href}>
            {name}
          </a>
        ) : (
          <div>{name}</div>
        )
      )
    }
  </div>
</div>

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

<style>
  #container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em 1em;
    align-items: center;

    @media (max-width: 35em) {
      grid-template-columns: 1fr;
    }

    & > #title {
      display: flex;
      place-items: center;
      gap: 8px;

      & > p {
        font-size: 1.5em;
        font-weight: 600;
        translate: 0px -0.1em;
      }
    }

    & > #values {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;

      &.with-border {
        & > * {
          border-radius: 9999px;
          padding-bottom: 0.25em;
          padding-top: 0.15em;
          padding-inline: 0.6em;
          backdrop-filter: blur(10px);
        }

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