export type CustomWorldWorkFilter = 'all' | 'draft' | 'published';

const FILTER_OPTIONS: Array<{
  id: CustomWorldWorkFilter;
  label: string;
}> = [
  { id: 'all', label: '全部' },
  { id: 'draft', label: '草稿' },
  { id: 'published', label: '已发布' },
];

type CustomWorldWorkTabsProps = {
  activeFilter: CustomWorldWorkFilter;
  draftCount: number;
  publishedCount: number;
  onChange: (filter: CustomWorldWorkFilter) => void;
};

export function CustomWorldWorkTabs({
  activeFilter,
  draftCount,
  publishedCount,
  onChange,
}: CustomWorldWorkTabsProps) {
  return (
    <div className="platform-remap-surface flex items-center gap-2 overflow-x-auto pb-1 scrollbar-hide xl:pb-0">
      {FILTER_OPTIONS.map((option) => {
        const count =
          option.id === 'draft'
            ? draftCount
            : option.id === 'published'
              ? publishedCount
              : draftCount + publishedCount;

        return (
          <button
            key={option.id}
            type="button"
            onClick={() => onChange(option.id)}
            className={`platform-tab shrink-0 px-4 py-2 text-sm xl:px-4 xl:py-1.5 xl:text-xs ${
              activeFilter === option.id ? 'platform-tab--active' : ''
            }`}
          >
            {option.label} {count}
          </button>
        );
      })}
    </div>
  );
}
