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

import {
  Pill, Bold, Icon, Wrap, Notification, Glyph,
} from '../../styled';
import { SuccessPillsPropsType } from '../types';

const accentColor = theme.colors.secondary.green.base;

const Light = ({ onClick, viewName }: SuccessPillsPropsType) => (
  <Notification>
    <Pill accentColor={accentColor} minWidth="440">
      <Glyph name="success" color={accentColor} />
      <Wrap>
        <Bold variant="bodyBoldDark">
          {`${viewName} view created`}
        </Bold>
      </Wrap>
      <Icon name="cross" onClick={onClick} color="#959FA8" />
    </Pill>
  </Notification>
);

export default Light;