import * as React from 'react';
import Link from 'next/link';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';

export interface NewRequestCardProps {
  title: string;
  Icon: (props: SvgIconProps) => JSX.Element;
  onClick?: () => void;
}

export default function NewRequestCard(props: NewRequestCardProps) {
  const { title, Icon, onClick } = props;
  return (
    <Card sx={{ minWidth: 275, cursor: 'pointer' }} onClick={onClick}>
      <CardContent
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: '1rem',
        }}
      >
        <Icon
          sx={{
            width: '5rem',
            height: '5rem',
          }}
        />
        <Typography>{title}</Typography>
      </CardContent>
    </Card>
  );
}