import * as React from 'react';
import styled from 'styled-components';

import { IProps } from '../AlertFlag';

import Colors from '../../Colors';
import TextHelper from '../../TextHelper';
import Icons from '../../Icons';

const Wrapper = styled.div`
  color: ${Colors.apple};
  background-color: ${Colors.heaven};
  padding: 16px;
  font-family: ${TextHelper.fontVariant('medium')};
  display: flex;
  align-items: center;

  svg {
    margin-right: 10px;
  }
`;

export default ({ children, ...props }: IProps) => (
  <Wrapper {...props}>
    <Icons.Success color={Colors.apple} height={18} width={23}  />
    {children}
  </Wrapper>
);