Scrum4Me/components/jobs/jobs-time-filter.tsx

'use client'

import { useShallow } from 'zustand/react/shallow'
import { useUserSettingsStore } from '@/stores/user-settings/store'
import { cn } from '@/lib/utils'
import { debugProps } from '@/lib/debug'
import {
  JOBS_TIME_FILTER_VALUES,
  DEFAULT_JOBS_TIME_FILTER,
  type JobsTimeFilter,
} from '@/lib/jobs-time-filter'

const LABELS: Record<JobsTimeFilter, string> = {
  '1h': '1 uur',
  '24h': '24 uur',
  all: 'Alles',
}

export default function JobsTimeFilterControl() {
  const current =
    useUserSettingsStore(
      useShallow((s) => s.entities.settings.views?.jobs?.timeFilter),
    ) ?? DEFAULT_JOBS_TIME_FILTER
  const setPref = useUserSettingsStore((s) => s.setPref)

  return (
    <div
      className="flex items-center gap-1.5"
      {...debugProps('jobs-time-filter', 'JobsTimeFilter', 'components/jobs/jobs-time-filter.tsx')}
    >
      {JOBS_TIME_FILTER_VALUES.map((v) => (
        <button
          key={v}
          type="button"
          onClick={() => void setPref(['views', 'jobs', 'timeFilter'], v)}
          className={cn(
            'text-xs px-2.5 py-1 rounded-full border transition-colors',
            current === v
              ? 'bg-primary text-primary-foreground border-primary'
              : 'bg-transparent border-border hover:bg-surface-container',
          )}
        >
          {LABELS[v]}
        </button>
      ))}
    </div>
  )
}