import React, { FC } from 'react';

import Box from '@material-hu/mui/Box';
import Card from '@material-hu/mui/Card';
import Typography from '@material-hu/mui/Typography';

export type CardModulesProps = {
  title: string;
  Icon: React.ElementType;
  onClick: () => void;
};

export const CardModules: FC<CardModulesProps> = props => {
  const { title, Icon, onClick } = props;

  return (
    <Card
      sx={{
        width: '200px',
        height: '100px',
        p: 2,
        mx: 1.7,
        mb: 4,
        display: 'flex',
        justifyContent: 'center',
        border: '1px solid #e0e0e0',
        color: '#6c757d',
        cursor: 'pointer',
        ':hover': {
          backgroundColor: '#e0e0e0',
          color: theme => theme.palette.primary.main,
        },
      }}
      onClick={onClick}
    >
      <Box>
        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
          <Icon fontSize="large" />
        </Box>
        <Box sx={{ mt: 1 }}>
          <Typography
            sx={{
              fontWeight: 500,
            }}
          >
            {title}
          </Typography>
        </Box>
      </Box>
    </Card>
  );
};

export default CardModules;