import { Box, FormControl, InputLabel, MenuItem, Select } from '@mui/material'
import Header from 'components/Header'
import OverviewChart from 'components/OverviewChart';
import React, { useState } from 'react'

const Overview = () => {
    const [view, setView] = useState("units");
    

  return (
    <Box m="1.5rem 2.5rem">
        <Header title="Overview" subtitle="Overview of general revenue and profit"/>
        <Box height="75vh" mt="2rem">
            <FormControl>
                <InputLabel>View</InputLabel>
                <Select label="View" value={view} onChange={(e) => setView(e.target.value)}>
                    <MenuItem value="sales">Sales</MenuItem>
                    <MenuItem value="units">Unit</MenuItem>
                </Select>
            </FormControl>
            <OverviewChart view={view}/>
        </Box>
    </Box>
  )
}

export default Overview