---
interface Props {
  caseTypes: string[];
}

const { caseTypes } = Astro.props;
---

<div class="flex flex-wrap justify-center gap-2 mb-12" id="case-filters">
  {caseTypes.map((type, index) => (
    <button
      data-filter={type === "Все отзывы" ? "all" : type}
      class={`filter-btn px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 hover:cursor-pointer ${index === 0 ? 'bg-[var(--color-gold)] text-[var(--color-white)]' : 'bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/20 text-[var(--color-gray-400)] hover:border-[var(--color-gold)]/30 hover:text-[var(--color-white)]'}`}
    >
      {type}
    </button>
  ))}
</div>
