---
import type { HTMLAttributes } from "astro/types";

interface Props extends HTMLAttributes<"span"> {
  colour?: String;
  textColour?: String;
  size?: String;
  hover?: String;
}

const {
  colour = "bg-primary",
  textColour = "text-white",
  size = "text-xs",
  hover = "hover:bg-white hover:text-primary hover:ring-primary hover:ring-2",
  class: className,
  ...attrs
} = Astro.props as Props;
---

<span
  class:list={[
    "inline-block rounded px-2 py-1 font-bold uppercase",
    colour,
    textColour,
    className,
    size,
    hover
  ]}
  {...attrs}><slot /></span
>