"use client";

import NavBar from "@/components/NavBar/NavBar";
import NavBarItem from "@/components/NavBar/NavBarItem";
import { ReactElement, useState } from "react";
import BodyTypes from "@/pages/BodyType"
import CarBrand from "@/pages/CarBrand";
import CarModel from "@/pages/CarModel";
import Engine from "@/pages/Engine";
import Trim from "@/pages/Trim";
import CarColor from "@/pages/CarColor";
import Transmission from "@/pages/Transmission";
import Sale from "@/pages/Sale";
import Car from "@/pages/Car";
import Customer from "@/pages/Customer";
import {useModalContext} from "@/components/Modal/ModalContext";
import Modal from "@/components/Modal/Modal";

export default function App() {
    const [content, setContent] = useState<ReactElement | null>(null);
    const { contentModal } = useModalContext();

    return (
        <>
            {contentModal ? <Modal>{contentModal}</Modal> : ""}
            <NavBar>
                <NavBarItem onClick={() => setContent(<CarBrand />)}>
                    Марки автомобилей
                </NavBarItem>
                <NavBarItem onClick={() => setContent(<CarModel />)}>
                    Модели автомобилей
                </NavBarItem>
                <NavBarItem onClick={() => setContent(<BodyTypes />)}>
                    Типы кузовов
                </NavBarItem>
                <NavBarItem onClick={() => setContent(<Engine />)}>
                    Двигатели
                </NavBarItem>
                <NavBarItem onClick={() => setContent(<Trim />)}>
                    Комплектации
                </NavBarItem>
                <NavBarItem onClick={() => setContent(<CarColor />)}>
                    Цвета автомобилей
                </NavBarItem>
                <NavBarItem onClick={() => setContent(<Transmission />)}>
                    Трансмиссии
                </NavBarItem>
                <NavBarItem onClick={() => setContent(<Sale />)}>
                    Продажи
                </NavBarItem>
                <NavBarItem onClick={() => setContent(<Car />)}>
                    Автомобили
                </NavBarItem>
                <NavBarItem onClick={() => setContent(<Customer />)}>
                    Клиенты
                </NavBarItem>
            </NavBar>
            {content}
        </>
    );
}
