import { ListGridViewToggle } from "@/components/ui/list-grid-view-toggle";
import {
  cdcGpsfMeetingRequestI18n,
  getCdcGpsfMeetingRequestFont,
  type CdcGpsfMeetingRequestUiLang,
} from "@/features/cdc-gpsf/meeting-requests/cdc-gpsf-meeting-request-i18n";

export type CdcGpsfMeetingRequestsViewMode = "table" | "grid";

type CdcGpsfMeetingRequestsViewTabsProps = {
  activeView: CdcGpsfMeetingRequestsViewMode;
  language?: CdcGpsfMeetingRequestUiLang;
  onViewChange?: (view: CdcGpsfMeetingRequestsViewMode) => void;
};

export function CdcGpsfMeetingRequestsViewTabs({
  activeView,
  language = "km",
  onViewChange,
}: CdcGpsfMeetingRequestsViewTabsProps) {
  const t = cdcGpsfMeetingRequestI18n(language);

  return (
    <ListGridViewToggle
      value={activeView}
      onChange={onViewChange}
      listLabel={t.list}
      gridLabel={t.grid}
      listValue="table"
      gridValue="grid"
      fontFamily={getCdcGpsfMeetingRequestFont(language)}
    />
  );
}