"use client";

import { useRouter } from "next/navigation";

/**
 * The filter lives in the URL rather than in `useState` so the server component
 * above can do the fetching — same trade as the orders page. Toggling always
 * drops the page number, which is what `setPage(1)` used to do by hand.
 */
export default function UnreadOnlyFilter({ value }: { value: boolean }) {
  const router = useRouter();

  return (
    <label className="flex items-center gap-2 text-sm text-gray-700">
      <input
        type="checkbox"
        checked={value}
        onChange={(e) => router.push(e.target.checked ? "/notifications?unread=1" : "/notifications")}
        className="h-4 w-4 rounded border-gray-300 text-[#CC1414] focus:ring-[#CC1414]"
      />
      Unread only
    </label>
  );
}