---
interface Props {
  name: string;
  description: string;
  // img?: string;
  git?: string;
  web?: string;
  skills?: string[];
}

const { name, description, git, web, skills } = Astro.props;

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

<div class="main">
  <div style="display:flex">
    <div style="margin-left:1rem" class="cardText">
      <div>
        <h2>{name}</h2>
        {
          git ? (
            <a href={git}>
              <Icon name="simple-icons:git" size="1.25rem" />
            </a>
          ) : null
        }
        {
          web ? (
            <a href={web}>
              <Icon name="lucide:globe" size="1.25rem" />
            </a>
          ) : null
        }
      </div>
      <p>{description}</p>
      <div>
        {skills && skills.map((skill) => <span class="skill">{skill}</span>)}
      </div>
    </div>
  </div>
</div>

<style>
  .main {
    background-color: #292e28;
    border-radius: 8px;
    padding: 0.5rem;
    /* line-height: 1; */
    margin: 0.5rem;
  }

  .cardText {
    h2 {
      font-weight: 500;
      font-size: 1rem;
      color: #e6fbd4;
    }
    p {
      font-weight: 400;
      color: #9dac93;
      font-size: 0.9rem;
    }
    a {
      text-decoration: none;
    }
  }

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

  .skill {
    display: inline-block;
    background: #1b1e1a;
    color: #c3d6b2;
    border-radius: 6px;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    margin-right: 0.3rem;
    margin-bottom: 0.2rem;
    /* font-weight: 500; */
  }

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

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