import React from 'react';
import { TravelEnquiryFormProps } from './types';
import { CheckmarkSvg } from './CheckmarkSvg';
import {
  FormOverlay,
  FormContainer,
  CloseButton,
  SuccessContainer,
  SuccessIcon,
  SuccessTitle,
  SuccessMessage,
  ButtonRow,
  NavButton
} from './styles';

export const SuccessScreen: React.FC<TravelEnquiryFormProps> = ({
  isApp,
  onClose
}) => (
  <FormOverlay onClick={onClose}>
    <FormContainer
      isApp={isApp}
      onClick={e => e.stopPropagation()}
      data-testid="travel-enquiry-form"
    >
      <CloseButton onClick={onClose} aria-label="Close form">
        ✕
      </CloseButton>
      <SuccessContainer>
        <SuccessIcon>
          <CheckmarkSvg width={32} height={32} />
        </SuccessIcon>
        <SuccessTitle isApp={isApp}>Enquiry submitted!</SuccessTitle>
        <SuccessMessage isApp={isApp}>
          Thank you for your enquiry. One of our travel consultants will get
          back to you as soon as possible.
        </SuccessMessage>
        <ButtonRow style={{ justifyContent: 'center', marginTop: '24px' }}>
          <NavButton $variant="primary" isApp={isApp} onClick={onClose}>
            Close
          </NavButton>
        </ButtonRow>
      </SuccessContainer>
    </FormContainer>
  </FormOverlay>
);