"use client"
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { Input } from "./ui/input"
import { useDebouncedCallback } from 'use-debounce';
import { useState, useTransition } from 'react';
import Loading from './Loading';

export default function Search() {
    const searchParams = useSearchParams();
    const { replace } = useRouter();
    const pathname = usePathname();
    const [isPending, startTransition] = useTransition()
    const handleSearch = useDebouncedCallback((term) => {
        const params = new URLSearchParams(searchParams);
        params.set('page', '1');
        if (term) {
            params.set('query', term);
        } else {
            params.delete('query');
        }
        startTransition(() => {
            replace(`${pathname}?${params.toString()}`);
        })
    }, 300);
    return (
        <>
            {isPending && <Loading/>}
            <Input
                type="text" 
                placeholder="Search" 
                className="w-full h-12" 
                onChange={(e) => {
                    handleSearch(e.target.value);
                }}
                defaultValue={searchParams.get('query')?.toString()}
            />
        </>
    )
}