export default function CategoryNav({ categories, active, onSelect }) {
  return (
    <div className="flex gap-1 overflow-x-auto px-4 pb-2 pt-1 scrollbar-hide">
      {categories.map(cat => (
        <button
          key={cat.id}
          onClick={() => onSelect(cat.id)}
          className={`flex-shrink-0 px-4 py-1.5 rounded-full text-sm font-medium transition-colors ${
            active === cat.id
              ? 'bg-emerald-500 text-white'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          {cat.name}
        </button>
      ))}
    </div>
  )
}