import React from "react";
import styled from "styled-components";
import { colors } from "constants/theme";
import { lighten } from "polished";
import PropTypes from "prop-types";

const textStyle = lighten(0.1, colors.darkBlue);
const codeStyle = lighten(0.1, colors.blue);

export const Message = styled.div`
  display: flex;
  flex-direction: column;
  flex: 1;
`;

export const Heading = styled.h2`
  font-size: 1.2em;
  color: ${textStyle};
  margin: 0 0 0.3em;
`;

export const Subheading = styled.h3`
  color: ${codeStyle};
  font-size: 1em;
  font-weight: normal;
  margin: 0;
`;

export const Description = styled.p`
  font-size: 0.9em;
  color: ${textStyle};
`;

const DialogMessage = props => {
  const { heading, subheading, description, ...otherProps } = props;

  return (
    <Message {...otherProps}>
      <Heading>{heading}</Heading>
      <Subheading>{subheading}</Subheading>
      <Description>{description}</Description>
    </Message>
  );
};

DialogMessage.propTypes = {
  heading: PropTypes.string.isRequired,
  subheading: PropTypes.string,
  description: PropTypes.string
};

export default DialogMessage;

@@ -617,17 +617,19 @@
  styled.
-p
+div
 %60%0A  font
@@ -638,24 +638,41 @@
 ize: 0.9em;%0A
+  margin: 1em 0;%0A
   color: $%7Bt

fix invalid element nesting in DeleteConfirmDialog