"use client";
import { useSearchParams } from "next/navigation";
import SearchComponentF from "../../components/search";
import ProductF from "@/components/product";
import { useEffect, useState } from "react";
import { IProduct } from "%/models/models";
import useSWR from "swr";

const fetchProducts = async (url: string) => {
    const response = await fetch(url);

    if (!response.ok) {
        throw new Error("Failed to fetch products");
    }
    return response.json();
};

export default function FoundPageF() {
    const search = useSearchParams();
    const searchQuery = search ? search.get("q") : null;

    const encodedSearchQuery = encodeURI(searchQuery || "");

    const { data, isLoading } = useSWR(
        `/api/find?q=${encodedSearchQuery}`,
        fetchProducts
    );

    console.log("HERE IS DATA", data);

    return (
        <div className="w-auto  m-5">
            <SearchComponentF />
        </div>
    );
}