const Tab = ({ text, active, count, onClick }) => (
  <button
    onClick={onClick}
    className={`pb-4 px-2 relative font-label font-medium text-sm transition-colors min-h-[44px] ${
      active
        ? 'text-primary border-b-2 border-primary'
        : 'text-gray-500 hover:text-secondary'
    }`}
  >
    {text}
    {count !== undefined && (
      <span className="ml-1.5 text-xs text-gray-400">({count})</span>
    )}
  </button>
);
export default Tab;
