---
interface Props {
  text?: string;
  href: string;
  newtab?: boolean;
}

const { href, text = "", newtab = false } = Astro.props;
---

{
  newtab ? (
    <div>
      <a target="_blank" rel="noopener noreferrer" href={href}>
        {text}
      </a>
    </div>
  ) : (
    <div>
      <a href={href}>{text}</a>
    </div>
  )
}

<style>
  div {
    padding-right: 5px;
    margin-right: 5px;
    padding-left: 5px;
    margin-left: 5px;
    padding-top: 6px;
    margin-top: 4px;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-radius: 7px;
  }
  a {
    text-decoration: none;
    font-weight: 500;
    color: #9dac93;
    font-size: 1rem;
  }

  div:hover {
    text-decoration: underline;
    text-decoration-color: #9dac93;
  }
</style>
