import React from 'react';

import PropTypes from 'prop-types';

import TNewPopUp from '../TPopUp/TNewPopUp'; // TNewPopUp 컴포넌트의 정확한 경로를 확인해주세요.
import css from './OptionalConfirm.module.less';

/**
 * 선택 약관 동의 팝업 컴포넌트입니다.
 * 이 컴포넌트는 약관 동의 UI를 표시하며, 내부에서 다른 팝업을 관리하지 않습니다.
 * 버튼 클릭 이벤트는 props로 전달받아 상위 컴포넌트에서 처리합니다.
 */
const OptionalConfirm = ({
  open,
  spotlightId,
  className,
  onClose,
  onOptionalTermsClick, // 약관 자세히 보기 버튼 클릭 핸들러
  onOptionalAgreeClick,   // 동의 버튼 클릭 핸들러
  onOptionalDeclineClick, // 거절 또는 다음에 하기 버튼 클릭 핸들러
  customPosition,
  position,
}) => {
  return (
    <TNewPopUp
      kind="optionalConfirm" // 이 kind에 따라 TNewPopUp 내부 UI/UX가 결정됩니다.
      open={open}
      spotlightId={spotlightId}
      spotlightRestrict="self-only" // 필요에 따라 props로 설정 가능하게 할 수 있습니다.
      className={`${css.optionalConfirmPopup} ${className || ''}`.trim()}
      onClose={onClose}
      onOptionalTermsClick={onOptionalTermsClick}
      onOptionalAgreeClick={onOptionalAgreeClick}
      onOptionalDeclineClick={onOptionalDeclineClick}
      customPosition={customPosition}
      position={position}
    />
  );
};

OptionalConfirm.propTypes = {
  /** 팝업의 표시 여부 */
  open: PropTypes.bool.isRequired,
  /** Spotlight ID */
  spotlightId: PropTypes.string.isRequired,
  /** 추가적인 CSS 클래스 */
  className: PropTypes.string,
  /** 팝업의 닫기 이벤트 핸들러 (ESC 키 등) */
  onClose: PropTypes.func,
  /** 약관 자세히 보기 버튼 클릭 시 호출될 함수 */
  onOptionalTermsClick: PropTypes.func,
  /** 동의 버튼 클릭 시 호출될 함수 */
  onOptionalAgreeClick: PropTypes.func,
  /** 거절 또는 다음에 하기 버튼 클릭 시 호출될 함수 */
  onOptionalDeclineClick: PropTypes.func,
  /** 사용자 정의 위치 사용 여부 */
  customPosition: PropTypes.bool,
  /** 사용자 정의 위치 값 (customPosition이 true일 때 사용) */
  position: PropTypes.object,
};

OptionalConfirm.defaultProps = {
  className: '',
  onClose: () => console.log('OptionalConfirm: onClose not provided'),
  onOptionalTermsClick: () => console.log('OptionalConfirm: onOptionalTermsClick not provided'),
  onOptionalAgreeClick: () => console.log('OptionalConfirm: onOptionalAgreeClick not provided'),
  onOptionalDeclineClick: () => console.log('OptionalConfirm: onOptionalDeclineClick not provided'),
  customPosition: false,
//   position: {},
};

export default OptionalConfirm;