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 HomeCardProps {
  title: string;
  Icon: (props: SvgIconProps) => JSX.Element;
  url: string;
}

export default function HomeCard(props: HomeCardProps) {
  const { title, Icon, url } = props;
  return (
    <Link href={url}>
      <Card elevation={8} sx={{ minWidth: 275, cursor: 'pointer' }}>
        <CardContent
          sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
          }}
        >
          <Icon
            sx={{
              width: '6rem',
              height: '6rem',
            }}
          />
          <Typography>{title}</Typography>
        </CardContent>
      </Card>
    </Link>
  );
}