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

export interface CustomerRatingClosedProps {
  translations?: {
    contentTitle?: string;
    contentText1?: string;
    contentText2?: string;
    contentText3?: string;
    homeButton?: string;
    backToOverviewButton?: string;
  };
  handleClick?: () => void;
  isCustomerLogin?: boolean;
}

const CustomerRatingClosed: FC<CustomerRatingClosedProps> = ({
  translations,
  handleClick,
  isCustomerLogin = false,
}) => {
  return (
    <>
      <div className={css.ratingClosed__contentWrap}>
        <div className={css.ratingClosed__contentHead}>
          <IconRatingClosedSVG className={css.ratingClosed__iconClosed} />
          <h2 className={css.ratingClosed__contentTitle}>
            {' '}
            {translations.contentTitle}{' '}
          </h2>
        </div>
        <div className={css.ratingClosed__contentText}>
          <div className={css.ratingClosed__contentText1}>
            {translations.contentText1}
          </div>
          <div className={css.ratingClosed__contentText2}>
            {translations.contentText2}
          </div>
          <div className={css.ratingClosed__contentText3}>
            {translations.contentText3 + ' '}
            <a href="mailto:info@mila.com">info@mila.com</a>
          </div>
        </div>
        {isCustomerLogin ? (
          <div className={css.ratingClosed__homeButton}>
            <Button
              type="button"
              handleClick={handleClick}
              variant={'tertiary'}
            >
              <IconAngleLeftSVG className={css.ratingClosed__iconLeftAngle} />
              {translations.backToOverviewButton}
            </Button>
          </div>
        ) : (
          <div className={css.ratingClosed__homeButton}>
            <Button
              type="button"
              handleClick={handleClick}
              variant={'tertiary'}
            >
              {translations.homeButton}
            </Button>
          </div>
        )}
      </div>
    </>
  );
};
export default CustomerRatingClosed;