import { FC } from 'react';

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

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

type Props = {
  heading: string;
  text: string;
  actionText: string;
  actionCallback: () => void;
};

const EditItem: FC<Props> = props => {
  const { actionCallback, actionText, heading, text } = props;
  return (
    <>
      <Typography
        variant="h6"
        sx={{ mb: 1, mt: 5 }}
      >
        {heading}
      </Typography>
      <Typography
        variant="body1"
        sx={{
          color: 'text.secondary',
          mb: 2,
        }}
      >
        {text}
      </Typography>
      <Button
        onClick={actionCallback}
        variant="text"
        sx={{
          alignSelf: 'flex-start',
        }}
      >
        {actionText}
      </Button>
    </>
  );
};

export default EditItem;