import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import {
  FilterMotionDuration,
  FilterMotionStyle,
  FilterMotionVariants
} from '@/entities/common/model/constant';

export interface ReferenceRequestFailProps {
  pageOn: boolean;
  setPageOn: (pageOn: boolean) => void;
  errorMsg: string;
};

export const ReferenceRequestFail = ({
  pageOn,
  setPageOn,
  errorMsg
}: ReferenceRequestFailProps) => {
  const { t } = useTranslation();
  const onClickToClose = () => {
    setPageOn(false);
  };
  return (
    <>
      <motion.div 
        className="full-menu-modal"
        initial="hidden"
        animate={(pageOn)? 'visible': 'hidden'}
        variants={ FilterMotionVariants }
        transition={ FilterMotionDuration }
        style={ FilterMotionStyle }
      >
        <div className="full-menu-container">
          <div 
            className="success-page"
            style={{ margin: '0 auto' }}
          >
            <div className="success-body">
              <div
                className="error-icon"
                aria-hidden="true"
              ></div>
              <h1 className="success-title">
                <span>{t('vatReturn.vatReferenceData')}</span>
                <br/>
                <span>{t('vatReturn.requestFailed')}</span>
              </h1>
              <div className="success-result">
                <p className="result-text align-left position_label">
                  <span>{t('vatReturn.result')} :</span>
                  <span>{ errorMsg }</span>
                </p>
              </div>
            </div>
            <div className="apply-row">
              <button
                className="btn-50 btn-blue flex-1"
                onClick={ onClickToClose }
              >{t('common.confirm')}</button>
            </div>
          </div>
        </div>
      </motion.div>
    </>
  );
};