import './bottom-details.component.scss';
import IssueTypesComponent from './components/issue-types/issue-types.component';
import TopApplicationsComponent from './components/top-applications/top-applications.component';
import TopDevicesComponent from './components/top-devices/top-devices.component';
import IssueCategoriesComponent from './components/issue-categories/issue-categories.component';
const BottomDetailsComponent = (props: any) => {
    // this is to indicate showing applications data
    const applicationProps = { ...props, ...{ applications: true } };

    return (
        <div className={'device-bottom-details-wrapper'}>
            <div className={'bg top-devices'}>
                <TopDevicesComponent {...props} />
            </div>
            <div className={'bg top-applications'}>
                {/*<TopApplicationsComponent {...props} />*/}
                <TopDevicesComponent {...applicationProps} />
            </div>
            {/*<div className={'bg issue-types'}>*/}
            {/*    <IssueTypesComponent {...props} />*/}
            {/*</div>*/}
            <div className={'bg issue-categories'}>
                <IssueCategoriesComponent {...props} />
            </div>
        </div>
    );
};
export default BottomDetailsComponent;