import { type ElementType } from 'react';

import InfoOutlined from '@material-hu/icons/material/InfoOutlined';
import * as colors from '@material-hu/mui/colors';
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 = {
  Icon?: ElementType;
  title?: string;
  description?: string;
  onAction?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  actionLabel?: string;
};

export const Info = ({
  Icon = InfoOutlined,
  title = '',
  description = '',
  onAction,
  actionLabel = '',
}: InfoProps) => {
  return (
    <Stack
      sx={{
        width: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        gap: 4,
        my: 5,
      }}
    >
      <Stack sx={{ justifyContent: 'center', alignItems: 'center', gap: 1 }}>
        <Icon sx={{ fontSize: '48px', color: colors.grey[700] }} />
        {title && <Typography variant="h6">{title}</Typography>}
        {description && <Typography variant="body1">{description}</Typography>}
      </Stack>
      {onAction && (
        <Button
          variant="contained"
          onClick={onAction}
        >
          {actionLabel}
        </Button>
      )}
    </Stack>
  );
};

export default Info;