import { motion } from 'framer-motion';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { PATHS } from '@/shared/constants/paths';
import {
  FilterMotionDuration,
  FilterMotionStyle,
  FilterMotionVariants
} from '@/entities/common/model/constant';

export interface ArsRequestSuccessPageProps {
  pageOn: boolean;
  setPageOn: (pageOn: boolean) => void;
  resultMessage?: string;
}

export const ArsRequestSuccessPage = ({
  pageOn,
  setPageOn,
  resultMessage
}: ArsRequestSuccessPageProps) => {
  const { navigate } = useNavigate();

  const onClickToClose = () => {
    setPageOn(false);
    navigate(PATHS.additionalService.ars.list);
  };

  return (
    <>
      <motion.div
        className="full-menu-modal"
        initial="hidden"
        animate={(pageOn) ? 'visible' : 'hidden'}
        variants={FilterMotionVariants}
        transition={FilterMotionDuration}
        style={{ ...FilterMotionStyle, overflow: 'hidden' }}
      >
        <div className="full-menu-container" style={{ paddingTop: '0px' }}>
          <div className="success-page">
            <div className="success-body">
              <div
                className="success-icon"
                aria-hidden="true"
              ></div>
              <h1 className="success-title">
                <span>ARS 결제 신청</span>
              </h1>
              <div className="success-result">
                <p className="result-text align-left position_label">
                  <span>결과 :</span>
                  <span>{resultMessage || '결제 신청이 완료되었습니다'}</span>
                </p>
              </div>
            </div>
            <div className="apply-row">
              <button
                className="btn-50 btn-blue flex-1"
                onClick={onClickToClose}
              >확인</button>
            </div>
          </div>
        </div>
      </motion.div>
    </>
  );
};