@kiwicom/smart-faq/src/shared/StaticFAQ/ArticleFeedback/ScreenError.js

// @flow

import * as React from 'react';
import css from 'styled-jsx/css';
import { Alert } from '@kiwicom/orbit-components';
import { Close } from '@kiwicom/orbit-components/lib/icons';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import ValueBind from '@kiwicom/nitro/lib/components/ValueBind';

import screenList from './screenList';
import Box from '../../../SmartFAQ/common/Box';

type Props = {|
  changeScreen: (nextScreen: $Values<typeof screenList>) => void,
  commentLimitReached?: boolean,
|};

const style = css`
  div.closeIcon {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
  }
`;

const ScreenError = ({ changeScreen, commentLimitReached }: Props) => (
  <Box
    border="none"
    borderRadius="4px"
    backgroundColor="#f5f7f9"
    padding="32px 24px"
  >
    <ValueBind value={screenList.VOTING} onChange={changeScreen}>
      {({ onClick }) => (
        <div
          className="closeIcon"
          onClick={onClick}
          onKeyUp={null}
          tabIndex="-1"
          role="button"
        >
          <Close customColor="#bac7d5" size="small" />
        </div>
      )}
    </ValueBind>
    <Alert type="warning" icon={!commentLimitReached}>
      {commentLimitReached ? (
        <Translate t="smartfaq.article_feedback.error_message.comment_limit_reached" />
      ) : (
        <Translate t="smartfaq.article_feedback.error_message.feedback_not_received" />
      )}
    </Alert>
    <style jsx>{style}</style>
  </Box>
);

export default ScreenError;