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

interface Props {
  icon: string;
  title: string;
  values: string[];
  withBorder?: boolean | undefined;
}

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((value) => <div>{value}</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 {
        & > div {
          border: 1px solid var(--color-base-1000);
          border-radius: 9999px;
          padding-bottom: 0.25em;
          padding-top: 0.15em;
          padding-inline: 0.6em;
          backdrop-filter: blur(10upx);
        }
      }
    }
  }
</style>