'use client';
import { Suspense, useEffect } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { DatePresets, useDateFilter } from '@/components/date-filter';

/** Interactive preset picker that navigates (the page itself is server-rendered). */
export function FilterBar() {
  const f = useDateFilter();
  const router = useRouter();
  const sp = useSearchParams();
  useEffect(() => {
    const cur = sp.toString();
    const next = f.qs.replace(/^&/, '');
    if (cur !== next) router.push(`/dashboard${next ? `?${next}` : ''}`);
  }, [f.qs, router, sp]);
  return (
    <Suspense>
      <DatePresets {...f} />
    </Suspense>
  );
}