import { UserAccountAuthWrapProps } from '../model/types';
import { UserAccountAuthPermList } from './user-account-auth-perm-list';

export const UserAccountAuthWrap = ({
  tid
}: UserAccountAuthWrapProps) => {
  let menuItems = [
    {menuId: 'menu1', permName: '거래조회'},
    {menuId: 'menu2', permName: '정산조회'},
    {menuId: 'menu3', permName: '가맹점 관리'},
    {menuId: 'menu4', permName: '결제 관리'},
    {menuId: 'menu5', permName: '계정 관리'},
    {menuId: 'menu6', permName: '부가세 신고 자료'},
    {menuId: 'menu7', permName: '부가서비스'},
    {menuId: 'menu8', permName: '고객지원'},
  ];
  return (
    <>
      <div className="ing-list pdtop">
        <div className="perm-form">
          <div className="perm-field">
            <div className="perm-label">계정 상태</div>
            <div className="perm-control">
              <select>
                <option selected>사용</option>
                <option>미사용</option>
              </select>
            </div>
          </div>
          <div className="perm-field">
            <div className="perm-label">로그인 범위</div>
            <div className="perm-control">
              <select>
                <option>MID</option>
                <option>GID</option>
                <option selected>MID + GID</option>
              </select>
            </div>
          </div>
        </div>

        <div className="ing-title fs18">메뉴별 권한 설정</div>

        <UserAccountAuthPermList
          tid={ tid }
          permItems={ menuItems }
        ></UserAccountAuthPermList>

        <div className="apply-row bottom-padding">
          <button 
            className="btn-50 btn-blue flex-1"
            type="button" 
          >저장</button>
        </div>
      </div>
    </>
  );
};