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="flex min-w-0 items-center gap-4 overflow-x-auto pb-1 scrollbar-hide xl:pb-0"
      role="tablist"
      aria-label="作品筛选"
    >
      {FILTER_OPTIONS.map((option) => {
        const count =
          option.id === 'draft'
            ? draftCount
            : option.id === 'published'
              ? publishedCount
              : draftCount + publishedCount;

        return (
          <button
            key={option.id}
            type="button"
            role="tab"
            aria-selected={activeFilter === option.id}
            onClick={() => onChange(option.id)}
            className={`platform-mobile-home-channel shrink-0 ${activeFilter === option.id ? 'platform-mobile-home-channel--active' : ''}`}
          >
            {option.label} {count}
          </button>
        );
      })}
    </div>
  );
}
