import { UserLoginAuthInfoWrapProps } from '../model/types';

export const UserLoginAuthInfoWrap = ({
  tid
}: UserLoginAuthInfoWrapProps) => {

  return (
    <>
      <div className="ing-list pdtop">
        <div className="settings-login-auth">
          <div className="group">
            <div className="group-header">
              <div className="title">이메일 주소</div>
              <button 
                className="ic20 plus" 
                type="button" 
                aria-label="추가"
              ></button>
            </div>
            <div className="input-row">
              <input 
                type="text" 
                value="nicetest01@nicepay.co.kr" 
                placeholder="example@domain.com" 
              />
              <button 
                className="icon-btn minus" 
                type="button" 
                aria-label="삭제"
              ></button>
            </div>
            <div className="input-row">
              <input 
                type="text" 
                value="nicetest01@nicepay.co.kr"
                placeholder="example@domain.com" 
              />
              <button 
                className="icon-btn minus" 
                type="button" 
                aria-label="삭제"
              ></button>
            </div>
            <div className="input-row">
              <input 
                type="text" 
                placeholder="example@domain.com" 
              />
              <button 
                className="icon-btn minus" 
                type="button" 
                aria-label="삭제"
              ></button>
            </div>
          </div>

          <div className="group">
            <div className="group-header">
              <div className="title">휴대폰 번호</div>
              <button 
                className="ic20 plus" 
                type="button" 
                aria-label="추가"
              ></button>
            </div>
            <div className="input-row">
              <input 
                type="text" 
                value="01012345678" 
                placeholder="휴대폰 번호 입력" 
              />
              <button 
                className="icon-btn minus" 
                type="button" 
                aria-label="삭제"
              ></button>
            </div>
            <div className="input-row">
              <input 
                type="text" 
                value="01012345678" 
                placeholder="휴대폰 번호 입력" 
                readOnly={ true } 
              />
              <button 
                className="icon-btn minus" 
                type="button" 
                aria-label="삭제"
              ></button>
            </div>
            <div className="notice-bar">※ 탭을 변경하면 미저장 내용은 초기화됩니다.</div>
          </div>
        </div>
        <div className="apply-row bottom-padding">
          <button className="btn-50 btn-blue flex-1">저장</button>
        </div>
      </div>
    </>
  );
};