---
interface Props {
  medium: string;
  pgp?: boolean;
}

const { medium, pgp } = Astro.props;

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

const icons: { [key: string]: string } = {
  signal: "simple-icons:signal",
  email: "lucide:mail",
  matrix: "simple-icons:matrix",
};
---

<div class="main" data-contact-card>
  <div style="display:flex">
    <div
      style="display: flex; align-items: center; margin-right: 0.2rem; margin-left: 1.75rem;"
    >
      <Icon name={icons[medium.toLowerCase()]} size="50" />
    </div>
    <div style="margin-left:1rem; margin-bottom: 1rem" class="cardText">
      <h2 data-medium>{medium}</h2>
      <div>
        <p style="margin-bottom: 0.25rem;" data-id></p>
        {
          pgp ? (
            <a
              class="pgp"
              href="/pubkey.txt"
              target="_blank"
              rel="noopener noreferrer"
            >
              PGP Key
            </a>
          ) : null
        }
      </div>
      <div style={pgp ? "padding-top: 1rem" : "padding-top: 2rem"}>
        <a data-link target="_blank" rel="noopener noreferrer">Open -&gt;</a>
      </div>
    </div>
  </div>
</div>

<style>
  .main {
    background-color: #292e28;
    border-radius: 8px;
    /* width: fit-content; */
    padding: 0.5rem;
    line-height: 1;
    margin: 0.5rem;
  }
  .cardText {
    h2 {
      font-weight: 500;
      font-size: 1.25rem;
      color: #e6fbd4;
    }
    p {
      font-weight: 400;
      color: #9dac93;
    }
  }
  a {
    color: #e6fbd4;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  .pgp {
    text-decoration: underline;
    font-size: 0.8rem;
    color: #9dac93;
  }

  [data-icon] {
    margin-right: 1rem;
  }

  @media only screen and (max-width: 768px) {
    .main {
      width: 100%;
    }
  }

  @media only screen and (min-width: 769px) {
    .main {
      width: 18.5rem;
    }
  }
</style>
