import React from 'react';
import { theme } from '@veeqo/ui';

import {
  Bold, Icon, Notification, Glyph,
} from '../../styled';

import { Pill, IconWrap, Wrap } from './styled';
import { SuccessPillsPropsType } from '../types';

const accentColor = theme.colors.secondary.green.base;
const white = '#fff';

const Dark = ({ className, onClick, message }: SuccessPillsPropsType) => (
  <Notification>
    <Pill accentColor={accentColor} minWidth="440" className={className}>
      <IconWrap>
        <Glyph name="success" />
      </IconWrap>
      <Wrap>
        <Bold variant="bodyBoldDark" color={white}>
          {message}
        </Bold>
      </Wrap>
      <Icon name="cross" onClick={onClick} color={white} />
    </Pill>
  </Notification>
);

export default Dark;