'use client'; import Sidebar from './Sidebar'; import { HeaderProps } from '../../types'; import Link from 'next/link'; import Image from "next/image"; import api from '../../lib/axios'; import 'bootstrap/dist/css/bootstrap.min.css'; import { useEffect, useState } from "react"; export const Header = ({ maincategory }: HeaderProps) => { const [token, setToken] = useState(null); const [showSidebar, setShowSidebar] = useState(false); interface MainCategory { id: number; name: string // add other fields if needed } type Category = { id: number; name: string; seo: string; image: string; }; const [maincategorys, setMainCategory] = useState([]); const [selectedCategory, setSelectedCategory] = useState([]); const [activeCategoryId, setActiveCategoryId] = useState(null); useEffect(() => { // Only runs in browser const token = localStorage.getItem("token"); setToken(token); const fetchProfile = async () => { try { const { data } = await api.get('/api/user/main-category'); console.log(data.data.main_category); setMainCategory(data.data.main_category); // ✅ Automatically click the first category after loading if (data.data.main_category.length > 0) { handleClick(data.data.main_category[0].id); } } catch (err) { console.error('Error fetching profile:', err); } }; fetchProfile(); }, []); const handleClick = async (parentId: number) => { console.log(parentId); setActiveCategoryId(parentId); // ✅ Set active const { data } = await api.get(`/api/user/get-child-category/${parentId}`); console.log(data.data.categories); setSelectedCategory(data.data.categories); }; return ( <> setShowSidebar(false)} /> ); };