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

import Image from '@material-hu/components/composed-components/Image';
import Title from '@material-hu/components/design-system/Title';

export type DialogContentProps = {
  src: string;
  title: string;
  description: string;
  secondaryDescription?: string;
};

export const DialogContent = ({
  src,
  title,
  description,
  secondaryDescription,
}: DialogContentProps) => {
  return (
    <Stack>
      <Image
        src={src}
        sx={{ width: '100%', borderRadius: 0 }}
      />
      <Title
        variant="L"
        title={title}
        description={description}
        sx={{ pt: 2, px: 4 }}
      />
      {secondaryDescription && (
        <Title
          variant="L"
          description={secondaryDescription}
          sx={{ px: 4, pb: 2 }}
        />
      )}
    </Stack>
  );
};