"use client";

import { FilterBadges, FilterBar } from "@/components/views/config/filter-bar";
import { GroupConfig } from "@/components/views/config/group-config";
import { SortConfig } from "@/components/views/config/sort-config";
import { ViewSwitcher } from "@/components/views/config/view-switcher";

export interface ViewToolbarProps {
  /** Total item count shown at the end of the toolbar. */
  totalCount: number;
  /** Optional label for the count (default "items"). */
  countLabel?: string;
}

export function ViewToolbar({ totalCount, countLabel = "items" }: ViewToolbarProps) {
  return (
    <div className="flex min-w-0 flex-col gap-2">
      <div className="flex flex-wrap items-center gap-x-2 gap-y-1.5">
        <ViewSwitcher />
        <FilterBar />
        <SortConfig />
        <GroupConfig />
        <div className="min-w-[0.5rem] flex-1" aria-hidden />
        <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
          {totalCount} {countLabel}
        </span>
      </div>
      <FilterBadges />
    </div>
  );
}