import React from 'react'

export default function GroupBrowseFilters({ surfaces = [], currentSurface = 'featured' }) {
  if (!Array.isArray(surfaces) || surfaces.length === 0) return null

  return (
    <div className="mt-6 flex flex-wrap gap-2">
      {surfaces.map((surface) => (
        <a
          key={surface.value}
          href={`/groups?surface=${encodeURIComponent(surface.value)}`}
          className={`rounded-full border px-4 py-2 text-sm font-semibold transition ${currentSurface === surface.value ? 'border-sky-300/25 bg-sky-300/10 text-sky-100' : 'border-white/10 bg-white/[0.03] text-white hover:border-white/20 hover:bg-white/[0.06]'}`}
        >
          {surface.label}
        </a>
      ))}
    </div>
  )
}
