import { FC } from 'react';

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

export type AuthCardProps = {
  title?: string;
  subtitle?: string;
  titleVariant?: any;
  firstElement?: boolean;
  required?: boolean;
};

export const CommunityCard: FC<
  React.PropsWithChildren<AuthCardProps>
> = props => {
  const {
    children,
    title,
    subtitle,
    titleVariant: variant = 'h5',
    firstElement = false,
    required = false,
  } = props;

  return (
    <Card
      sx={{
        mt: firstElement ? 1 : { sm: 4, xs: 2 },
        width: '100%',
        height: '100%',
      }}
    >
      {title && (
        <Box sx={{ display: 'flex', alignItems: 'center' }}>
          <CardHeader
            title={title}
            sx={{
              textAlign: 'left',
              ml: 2,
              px: { xs: 0, sm: 2 },
              maxWidth: { xs: '80%', sm: '90%', md: '100%' },
            }}
            titleTypographyProps={{ variant }}
          />
          {required && (
            <Typography sx={{ fontSize: '20px', color: 'red' }}>*</Typography>
          )}
        </Box>
      )}
      {subtitle && (
        <Box sx={{ ml: 2, px: 2 }}>
          <Typography
            sx={{ mb: 1.5, fontSize: '14px', fontWeight: '500' }}
            color="text.secondary"
          >
            {subtitle}
          </Typography>
        </Box>
      )}
      <CardContent sx={{ px: { xs: 2, sm: 4 }, pt: 1 }}>{children}</CardContent>
    </Card>
  );
};

export default CommunityCard;