import { motion } from 'framer-motion';
import { BusinessMemberInfoKeys, InfoProps } from '../model/types';
import { InfoArrow } from './info-arrow';

export const InfoSettlementAccount = ({
  infoSettlementAccount,
  show,
  onClickToShowInfo
}: InfoProps) => {

  const variants = {
    hidden: { height: 0, padding: 0, display: 'none' },
    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
  };

  const onClickToSetShowInfo = () => {
    if(!!onClickToShowInfo){
      onClickToShowInfo(BusinessMemberInfoKeys.InfoSettlementAccount);
    }
  };

  return (
    <>
      <div className="section">
        <div className="section-title"
          onClick={ () => onClickToSetShowInfo() }
        >
          정산계좌 <InfoArrow show={ show }></InfoArrow>
        </div>
        <motion.ul 
          className="kv-list"
          initial="hidden"
          animate={ (show)? 'visible': 'hidden' }
          variants={ variants }
          transition={{ duration: 0.3 }}
        >
          <li className="kv-row">
            <span className="k">은행</span>
            <span className="v">신한은행</span>
          </li>
          <li className="kv-row">
            <span className="k">계좌번호</span>
            <span className="v">123-45-16798</span>
          </li>
          <li className="kv-row">
            <span className="k">예금주</span>
            <span className="v">김테스트</span>
          </li>
        </motion.ul>
      </div>
    </>
  );
};