import React from 'react';
import { Text } from '@veeqo/ui';
import { ViewName } from '../../types';

import {
  Popup,
  Content,
  Header,
  Footer,
  Button,
  Icon,
  Wrap,
  Description,
} from './styled';

type ConfirmationPropsType = {
  className: string;
  shouldShow: boolean;
  viewName: ViewName;
  onCancel: () => void;
  onDelete: () => void;
};

const Confirmation = ({
  className, shouldShow, viewName, onCancel, onDelete,
}: ConfirmationPropsType) => (
  <Popup shouldShow={shouldShow}>
    <Wrap className={className}>
      <Content>
        <Header>
          <Text variant="headingMedium">
            {`Remove ${viewName} view`}
          </Text>
          <Icon name="cross" onClick={onCancel} color="#959FA8" />
        </Header>
        <Description>
          <Text variant="body">
            This cannot be undone.
          </Text>
        </Description>
      </Content>
      <Footer>
        <Button onClick={onCancel}>
          Cancel
        </Button>
        <Button onClick={onDelete} variant="primaryDestructive">
          Remove
        </Button>
      </Footer>
    </Wrap>
  </Popup>
);

export default Confirmation;