---
import slugify from "src/utils/slugify";

export interface Props {
  name: string;
  size?: "sm" | "lg";
}

const { name, size = "sm" } = Astro.props;

const slug = slugify(name);
---

<li class="inline-block my-1">
  <a
    href={`/tags/${slug}`}
    class={`${size === "sm" ? "py-1 px-2 text-sm" : "p-2 text-lg"}`}
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class={`${size === "sm" ? " scale-75" : "scale-125"}`}
      ><path
        d="M20 4H8.515a2 2 0 0 0-1.627.838l-4.701 6.581a.997.997 0 0 0 0 1.162l4.701 6.581A2 2 0 0 0 8.515 20H20c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm0 14H8.515l-4.286-6 4.286-6H20v12z"
      ></path>
    </svg>
    <span>{name}</span>
  </a>
</li>

<style>
  a {
    @apply bg-skin-card hover:bg-skin-card-muted rounded;
  }
  a svg {
    @apply w-6 h-6 text-skin-base scale-75;
  }
</style>