import React, { useState } from 'react'

import Search from '../../../ui/inputs/Search'
import RegularDropDown from '../../../ui/inputs/RegularDropDown'
import Hrm from './hrm/Hrm'
import AssetManagement from './hrm/assetManagement/AssetManagement'

const ResourceManagement = () => {
    type DisplayType = "hrm" | "asset";
    const [selectType, setSelectType] = useState("assetManagement")

    const [display, setDisplay] = useState<DisplayType>("asset");

    return (
        <div className='resourceManagement-container'>
            <div className="navigation-wrapper">
                <div
                    className={`navigation ${selectType === "assetManagement" ? "active" : ""}`}
                    onClick={() => setSelectType("assetManagement")}
                >
                    Asset Management
                </div>
                <div
                    className={`navigation ${selectType === "peopleOperation" ? "active" : ""}`}
                    onClick={() => setSelectType("peopleOperation")}
                >
                    People Operations
                </div>
            </div>

            <div className="search-container">
                <Search onChange={() => { }} />
            </div>

            {selectType === "assetManagement" ? <AssetManagement /> : <Hrm />}
        </div>
    )
}

export default ResourceManagement
