import { Box, Typography } from '@mui/material'
import { ReactElement } from 'react'

import styles from './style.module.scss'

interface CardComponentProps {
  icon: ReactElement
  title: ReactElement
  description: ReactElement
  actions?: ReactElement
}

export const CardComponent = ({
  icon,
  title,
  description,
  actions
}: CardComponentProps) => {
  return (
    <div className={styles.card}>
      <Box
        className={styles.content}
        display={'flex'}
        gap={'20px'}
        flexDirection={'row'}
      >
        <Box className={styles.icon}>{icon}</Box>
        <Box>
          <Typography
            variant="h3"
            sx={{
              fontWeight: 'bold',
              fontSize: '24px',
              letterSpacing: '1px',
              lineHeight: '1.2'
            }}
          >
            {title}
          </Typography>
          <Typography
            sx={{
              mt: '10px',
              fontSize: '14px',
              lineHeight: '25px',
              letterSpacing: '1px',
              fontWeight: '500'
            }}
          >
            {description}
          </Typography>
        </Box>
      </Box>
      <Box mt={'auto'} textAlign={'right'}>
        {actions}
      </Box>
    </div>
  )
}