import { type FC } from 'react';

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';

export type InfoProps = {
  title: string;
  description: string;
  action?: {
    label: string;
    onClick: () => void;
  };
};

export const Info: FC<InfoProps> = ({ title, description, action }) => (
  <Stack
    sx={{
      justifyContent: 'center',
      alignItems: 'center',
      py: 6,
      mb: 3,
      gap: 1,
    }}
  >
    <Typography variant="subtitle1">{title}</Typography>
    <Typography variant="body2">{description}</Typography>
    {action && (
      <Button
        variant="outlined"
        onClick={action.onClick}
      >
        {action.label}
      </Button>
    )}
  </Stack>
);

export default Info;