import React, $\{$ useState, useEffect $\}$ from 'react';

import $\text{'}./$GearPage$.$css$\text{'}$;

import clothingData from $\text{'}../$data$/$clothing$.$json';

import DataForm from $\text{'}./$DataForm$\text{'}$;

const GearPage $=()=>\{$

const $[$selectedItems$,$ setSelectedItems$]=$ useState$([])$;

const $[$showModal$,$ setShowModal$]=$ useState$($false$)$;

const $[$items$,$ setItems$]=$ useState$([])$;

useEffect$(()=>\{$

fetch$(\text{'}$url end point'$)$

$.$then$(($response$)=>$ response.json$())$

$.$then$(($data$)=>$ setItems$($data$))$

$.$catch$(($error$)=>$ console.error$(\text{'}$Error fetching gear items:$\text{'},$ error$))$;

$\},[])$;

const addNewItem $=($newItem$)=>\{$

setItems$([...$items, newItem$])$; $//$ Function to add a new item to the state

$\}$;

const handleClick $=($category$)=>\{$

$//$ Load data based on category

let data $=[]$;

switch $($category$)\{$

case "Sneakers":

data $=$ shoesData;

break;

case "Clothing":

data $=$ clothingData;

break;

case "Watches":

data $=$ watchesData;

break;

case "Foam Rollers":

data $=$ foamRollersData;

break;

case "Water Bottles":

data $=$ waterBottlesData;

break;

case "Sunglasses":

data $=$ sunglassesData;

break;

case "Vests":

data $=$ vestsData;

break;

case "Lacrosse Balls":

data $=$ lacrosseBallsData;

break;

default:

data $=[]$;

$\}$

setSelectedItems$($data$)$;

setShowModal$($true$)$; $//$ Show the modal

$\}$;

const closeModal $=()=>\{$

setShowModal$($false$)$; $//$ Close the modal

$\}$;

return $($