import { ReactNode } from 'react';
import clsx from 'clsx';

export type TabItem = {
  label: string;
  value: string;
  count?: number;
  icon?: ReactNode; // 👈 support icons
};

type Props = {
  tabs: TabItem[];
  activeTab?: string;
  onChange?: (value: string) => void;
  className?: string;
};

const CircularTab = ({ tabs, activeTab, onChange, className }: Props) => {
  return (
    <div
      className={clsx(
        'flex items-center gap-1 rounded-lg bg-[#FBF6ED] p-1',
        className
      )}
    >
      {tabs.map((tab) => {
        const isActive = tab.value === activeTab;

        return (
          <button
            key={tab.value}
            type="button"
            onClick={() => onChange?.(tab.value)}
            className={clsx(
              'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-semibold transition',
              isActive
                ? 'bg-amber-950 text-white shadow-sm'
                : 'text-slate-600 hover:text-slate-800'
            )}
          >
            {tab.icon && <span className="flex items-center">{tab.icon}</span>}

            {tab.label}
            {typeof tab.count === 'number' && (
              <span className="opacity-70">({tab.count})</span>
            )}
          </button>
        );
      })}
    </div>
  );
};

export default CircularTab;