'use client'

import React, { useState, useEffect } from 'react'
import { useRouter, useSearchParams } from 'next/navigation';
import TopNavOne from '@/components/Header/TopNav/TopNavOne'
import MenuOne from '@/components/Header/Menu/MenuOne'
import ShopBreadCrumbImg from '@/components/Shop/ShopBreadCrumbImg';
import Footer from '@/components/Footer/Footer'
import { BaseURL } from '../../../../utils/BaseUrl'
import axios from 'axios';

export default function BreadcrumbImg() {
    const searchParams = useSearchParams()
    const type = searchParams.get('type')
    const categoryName = searchParams.get('category')

    const [products, setProducts] = useState([])
    const [loading, setLoading] = useState(true)
    const [categories, setCategories] = useState([])

    useEffect(() => {
        fetchProducts()
        getCategory()
    }, [])

    const fetchProducts = async () => {
        try {
            const response = await axios.get(`${BaseURL}/products`)
            setProducts(response?.data?.data)
            setLoading(false)
        } catch (error) {
            console.error('Error fetching products:', error)
            setLoading(false)
        }
    }


    const getCategory = async () => {
        try {
            const res: any = await axios?.get(`${BaseURL}/categories`)
            setCategories(res?.data?.data)
        } catch (error) {
            console.log(error)
        }
    }

    if (loading) {
        return <div>Loading...</div>
    }

    return (
        <>
            <TopNavOne props="style-one bg-black" slogan="New customers save 10% with the code GET10" />
            <div id="header" className='relative w-full'>
                <MenuOne props="bg-transparent" />
            </div>
            <ShopBreadCrumbImg data={products} productPerPage={12} dataType={categoryName} category={categories} />
            <Footer />
        </>
    )
}