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">
      {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={`shrink-0 rounded-full border px-4 py-2 text-sm transition ${
              activeFilter === option.id
                ? 'border-sky-300/20 bg-sky-500/10 text-sky-100'
                : 'border-white/10 bg-black/18 text-zinc-300 hover:text-white'
            }`}
          >
            {option.label} {count}
          </button>
        );
      })}
    </div>
  );
}