"use client"

import AQIGauge from "@/components/AQIGauge";
import { AQIData } from "@/types/types";
import React from 'react';
import Sidebar from '@/components/Sidebar';
import NavItem from '@/components/NavItem';
import { FaHome, FaUserAlt, FaCog } from 'react-icons/fa';
import {Box} from "@chakra-ui/react";

const Dashboard: React.FC = () => {
    const aqiData: AQIData = {
        aqi: 75,
        category: "Moderate",
        mainPollutant: "Ozone",
        timestamp: "2024-11-14T10:00:00",
        forecast: {
            today: "Good",
            tomorrow: "Moderate",
        },
    };
    const status = "Moderate";

    return (
        <Box className="flex">
            <Sidebar>
                    <NavItem icon={FaHome} label="Home" key="home" />
                    <NavItem icon={FaUserAlt} label="Profile" key="profile" />
                    <NavItem icon={FaCog} label="Settings" key="settings" />
            </Sidebar>
            <div className="flex-1 p-4">
                <AQIGauge data={aqiData} status={status} />
            </div>
        </Box>
    );
};

export default Dashboard;