blog-balodeplao/src/components/ui/Destinations.astro

---
export interface Props {
  destinations: string[];
  class?: string;
}

const { destinations, class: className = "text-sm" } = Astro.props;
---

{
  destinations && Array.isArray(destinations) && (
    <ul class:list={["flex flex-wrap gap-2", className]}>
      {destinations.map((destination) => (
        <li class="inline-block relative">
          <a
            href={`/destination/${destination}`}
            class="inline-flex items-center gap-1 bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-700 dark:text-emerald-400 hover:text-emerald-800 dark:hover:text-emerald-300 px-3 py-1 rounded-full border border-emerald-500/20 transition-colors duration-200"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="w-3 h-3"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
            >
              <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
              <circle cx="12" cy="10" r="3" />
            </svg>
            {destination}
          </a>
        </li>
      ))}
    </ul>
  )
}