---
type Props = {
  href: String;
  link: String;
  class?: string;
};

const { href, link, class: additionalClasses } = Astro.props;

const baseClasses =
  "bg-tertiary text-primary hover:bg-accent flex w-fit flex-row items-center gap-1 justify-self-center rounded-sm px-2 py-1 text-center text-sm font-medium text-nowrap capitalize";
const combinedClasses = `${baseClasses} ${additionalClasses || ""}`;
---

<a href={`${href}`}>
  <div class={combinedClasses}>
    {link}
  </div>
</a>