'use client';

import React from 'react';

const FilterTabs = ({ tabs = [], value, onChange, className = ''}) => {
  return (
    <div className={`inline-flex self-start border border-neutral-200 dark:border-neutral-700/30 rounded-xl overflow-hidden ${className}`}>
      {tabs.map((tab, index) => (
        <button
          key={tab.key}
          onClick={() => onChange(tab.key)}
          className={[
            'px-3 py-1.5 text-xs font-medium transition-colors cursor-pointer',
            index !== 0 ? 'border-l border-neutral-200 dark:border-neutral-700/30' : '',
            value === tab.key
              ? 'bg-neutral-100 dark:bg-neutral-700/40 text-neutral-900 dark:text-white'
              : 'bg-white dark:bg-neutral-800/30 text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700/20',
          ].filter(Boolean).join(' ')}
        >
          {tab.label}
          {tab.count !== undefined && (
            <span className={`ml-1.5 text-[10px] ${
              value === tab.key ? 'text-neutral-500 dark:text-neutral-400' : 'text-neutral-400'
            }`}>
              {tab.count}
            </span>
          )}
        </button>
      ))}
    </div>
  );
};

export default FilterTabs;
