import { motion } from 'framer-motion';
import { SettlementAgencyBottomAgreeProps } from '../../model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
export const SettlementAgencyBottomAgree = ({
  bottomAgreeOn,
  setBottomAgreeOn
}: SettlementAgencyBottomAgreeProps) => {

  const variants = {
    hidden: { y: '100%' },
    visible: { y: '0%' },
  };

  const onClickToClose = () => {
    setBottomAgreeOn(false);
  };

  const onClickToSaveSettlementAgencyAgree = () => {

  };
  return (
    <>
       {bottomAgreeOn &&
        <div className="bg-dim"></div>
      }
      <motion.div 
        className="bottomsheet"
        initial="hidden"
        animate={ (bottomAgreeOn)? 'visible': 'hidden' }
        variants={ variants }
        transition={{ duration: 0.5 }}
      >
        <div className="bottomsheet-header">
          <div className="bottomsheet-title">
            <h2>무이자 정보</h2>
            <button 
              className="close-btn" 
              type="button"
            >
              <img 
                src={ IMAGE_ROOT + '/ico_close.svg' }
                alt="닫기"
                onClick={ () => onClickToClose() }
              />
            </button>
          </div>
        </div>
        
        <div className="agree-section">
          <div className="agree-desc pb10">본 정산 내역은 정산금 지급 동의 확인을 위한<br/>것입니다.</div>
          <div className="agree-desc pb10">동의 시 수정 불가, 미동의 또는 거절 시 지급이 보류될 수 있습니다.</div>
          <div className="agree-desc pb16">지급 계좌·정산매장 정보 변경 시 반드시<br/>수정해야 합니다.</div>
          <div className="agree-desc pb16">빠른 출금은 동의대기/기한초과/출금실패 시 신청 가능하며, 신청 시간(10시 전·후)에 따라 당일 또는 익일 처리됩니다.</div>
          <div className="agree-desc pb16">이용자 정보 오기입(계좌번호, 사업자 정보 등)으로 인한 오지급·오류는 당사가 책임지지 않습니다.</div>
          <div className="sheet-divider"></div>

          <div className="agree-radio-group">
            <div className="check_box">
              <input 
                id="r1"
                className="checkbox"
                type="radio"
                name="r"
              />
              <label 
                className="gtr"
                htmlFor="r1" 
              ></label>정산동의
            </div>
            <div className="check_box">
              <input 
                id="r2"
                className="checkbox"
                type="radio"
                name="r" 
              />
              <label 
                className="gtr"
                htmlFor="r2" 
              ></label>정산거절
            </div>
            <div className="check_box">
              <input 
                className="checkbox"
                id="r3"
                type="radio"
                name="r"
              />
              <label
                className="gtr"
                htmlFor="r3" 
              ></label>빠른 출금
            </div>
          </div>
        </div>

        <div className="bottomsheet-footer">
          <button 
            className="btn-50 btn-blue flex-1" 
            type="button"
            onClick={ () => onClickToSaveSettlementAgencyAgree() }
          >저장</button>
        </div>
      </motion.div>
    </>
  );
};