import React, { FC } from 'react';
import Button from '../../blocks/Button';
import css from './index.module.css';
import IconCheckRedSVG from '../../assets/icons/icon-check-red.svg';
import IconAngleLeftSVG from '../../assets/icons/icon-angle-left.svg';

export interface RatingThankYouPageProps {
  translations?: {
    thanksText?: string;
    homeButton?: string;
    backToOverviewButton?: string;
  };
  handleClick?: () => void;
  isCustomerLogin?: boolean;
}

const RatingThankYouPage: FC<RatingThankYouPageProps> = ({
  translations,
  handleClick,
  isCustomerLogin = false,
}) => {
  return (
    <>
      <div className={css.ratingThankyou__contentWrap}>
        <div className={css.ratingThankyou__contentHead}>
          <IconCheckRedSVG className={css.ratingThankyou__iconCheck} />
          <h2 className={css.ratingThankyou__contentTitle}>
            {' '}
            {translations.thanksText}{' '}
          </h2>
        </div>
        {!isCustomerLogin && (
          <div className={css.ratingThankyou__homeButton}>
            <Button
              type="button"
              handleClick={handleClick}
              variant={'tertiary'}
            >
              {translations.homeButton}
            </Button>
          </div>
        )}
        {isCustomerLogin && (
          <div className={css.ratingThankyou__homeButton}>
            <Button
              type="button"
              handleClick={handleClick}
              variant={'tertiary'}
            >
              <IconAngleLeftSVG className={css.ratingThankyou__iconLeftAngle} />
              {translations.backToOverviewButton}
            </Button>
          </div>
        )}
      </div>
    </>
  );
};
export default RatingThankYouPage;