import React from 'react';
import Grid from '@material-ui/core/Grid';
import ControlPanelCard from '../../components/AdminControlPanel/ControlPanelCard/ControlPanelCard';

import icon1 from '../../../style/images/Icons-01.svg';
import icon2 from '../../../style/images/Icons-02.svg';
import icon4 from '../../../style/images/Icons-04.svg';

const AdminControlPanelPage = ({ transitToManageUsers }) => (
  <Grid
    container
    justify="space-around"
    spacing={16}
  >
    <ControlPanelCard
      headline="User Management"
      message="Add, rename and manage users"
      imageTitle="user management icon"
      image={icon1}
      onClick={() => transitToManageUsers()}
    />

    <ControlPanelCard
      headline="Reports"
      message="Track usage of services and download reports"
      imageTitle="reports icon"
      image={icon2}
    />
    <ControlPanelCard
      headline="Support"
      message="Talk with our support team"
      imageTitle="support icon"
      image={icon4}
    />
  </Grid>
);

export default AdminControlPanelPage;