import styled from 'styled-components';

import {
  theme,
  BaseContainer as CommonContainer,
  Button as CommonButton,
  Popup as UIPopup,
} from '@veeqo/ui';
import CommonGlyph from 'components/common/Glyph';

const Popup = styled(UIPopup)`
  &-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
`;

const Wrap = styled(CommonContainer)`
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 424px;
  background-color: #fff;
  border-radius: 4px;
`;

const Content = styled(CommonContainer)`
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 24px;
`;

const Description = styled(CommonContainer)`
  margin-top: 40px;
  min-height: 100px;
`;

const Header = styled(CommonContainer)`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
`;

const Icon = styled(CommonGlyph)`
  cursor: pointer;
`;

const Footer = styled(CommonContainer)`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid ${theme.colors.neutral.grey.dark};
  padding: 24px;
`;

const Button = styled(CommonButton)`
  &:first-child {
    margin-right: 16px;
  }
`;

export {
  Popup, Content, Header, Footer, Button, Icon, Wrap, Description,
};