---
interface Props {
  title?: string;
}
const { title } = Astro.props;
---

{
  title && (
    <div class="flex bg-white text-dark font-medium max-w-max px-4 py-1.5 text-sm rounded-xl items-center gap-x-2 badge">
      <svg
        class="badge-stars"
        width="14"
        height="14"
        viewBox="0 0 14 14"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          class="star"
          d="M5.83333 3.64587C5.65027 3.64587 5.48655 3.75986 5.42302 3.93154L5.12212 4.74475C4.71365 5.8486 4.54766 6.27023 4.24226 6.57567C3.93688 6.88104 3.51524 7.047 2.41137 7.45551L1.59817 7.75639C1.42648 7.81992 1.3125 7.98366 1.3125 8.16671C1.3125 8.34976 1.42648 8.5135 1.59817 8.57702L2.41137 8.87791C3.51524 9.28642 3.93688 9.45237 4.24226 9.75775C4.54766 10.0632 4.71365 10.4848 5.12212 11.5887L5.42302 12.4019C5.48655 12.5736 5.65027 12.6875 5.83333 12.6875C6.01638 12.6875 6.18013 12.5736 6.24365 12.4019L6.54453 11.5887C6.95304 10.4848 7.119 10.0632 7.42438 9.75775C7.72981 9.45237 8.15144 9.28642 9.25528 8.87791L10.0685 8.57702C10.2402 8.5135 10.3542 8.34976 10.3542 8.16671C10.3542 7.98366 10.2402 7.81992 10.0685 7.75639L9.25528 7.45551C8.15144 7.047 7.72981 6.88104 7.42438 6.57567C7.119 6.27023 6.95304 5.8486 6.54453 4.74475L6.24365 3.93154C6.18013 3.75986 6.01638 3.64587 5.83333 3.64587Z"
          fill="currentColor"
        />
        <path
          class="star"
          d="M10.5 1.3125C10.3169 1.3125 10.1532 1.42648 10.0897 1.59817L9.96071 1.94668C9.77772 2.44122 9.72446 2.5582 9.64133 2.64133C9.55821 2.72448 9.44125 2.77773 8.9467 2.96073L8.59816 3.08969C8.42648 3.15322 8.3125 3.31693 8.3125 3.5C8.3125 3.68307 8.42648 3.84678 8.59816 3.91031L8.9467 4.03927C9.44125 4.22227 9.55821 4.27552 9.64133 4.35866C9.72446 4.4418 9.77772 4.55878 9.96071 5.05332L10.0897 5.40183C10.1532 5.57352 10.3169 5.6875 10.5 5.6875C10.683 5.6875 10.8468 5.57352 10.9103 5.40183L11.0393 5.05332C11.2223 4.55878 11.2755 4.4418 11.3587 4.35866C11.4418 4.27552 11.5588 4.22227 12.0533 4.03927L12.4018 3.91031C12.5735 3.84678 12.6875 3.68307 12.6875 3.5C12.6875 3.31693 12.5735 3.15322 12.4018 3.08969L12.0533 2.96073C11.5588 2.77773 11.4418 2.72448 11.3587 2.64133C11.2755 2.5582 11.2223 2.44122 11.0393 1.94668L10.9103 1.59817C10.8468 1.42648 10.683 1.3125 10.5 1.3125Z"
          fill="currentColor"
        />
      </svg>
      <span>{title}</span>
    </div>
  )
}