import { IMAGE_ROOT } from "@/shared/constants/common";
import { InfoItem } from "./info-item";
import { InfoItemProps } from "../model/types";

export const InfoWrap = () => {
  
  const list1 = [
    {payName: '신용카드', payImage: 'pay_01.svg', infoLink: ''},
    {payName: '카카오페이', payImage: 'pay_02.svg', infoLink: ''},
    {payName: '네이버페이', payImage: 'pay_03.svg', infoLink: ''},
    {payName: '삼성페이', payImage: 'pay_04.svg', infoLink: ''},
    {payName: '계좌이체', payImage: 'pay_05.svg', infoLink: ''},
    {payName: '휴대폰결제', payImage: 'pay_06.svg', infoLink: ''},
    {payName: '문화상품권', payImage: 'pay_07.svg', infoLink: ''},
    {payName: 'SSG머니', payImage: 'pay_08.svg', infoLink: ''},
    {payName: 'TV페이', payImage: 'pay_09.svg', infoLink: ''},
    {payName: '삼성페이(카드)', payImage: 'pay_10.svg', infoLink: ''},
    {payName: '애플페이', payImage: 'pay_11.svg', infoLink: ''},
    {payName: '토스페이', payImage: 'pay_12.svg', infoLink: ''},
    {payName: 'PAYCO', payImage: 'pay_13.svg', infoLink: ''},
    {payName: '리브페이', payImage: 'pay_14.svg', infoLink: ''},
    {payName: '대만결제', payImage: 'pay_15.svg', infoLink: ''},
    {payName: '티머니페이', payImage: 'pay_16.svg', infoLink: ''},
    {payName: 'L.PAY', payImage: 'pay_17.svg', infoLink: ''},
    {payName: 'PAYU', payImage: 'pay_18.svg', infoLink: ''},
    {payName: 'TW라인페이', payImage: 'pay_19.svg', infoLink: ''},
    {payName: 'SSG페이', payImage: 'pay_21.svg', infoLink: ''},
    {payName: '케이뱅크페이', payImage: 'pay_22.svg', infoLink: ''},
    {payName: '가상계좌', payImage: 'pay_23.svg', infoLink: ''},
    {payName: 'SSG은행계좌', payImage: 'pay_21.svg', infoLink: ''},
    {payName: '계좌간편결제', payImage: 'pay_24.svg', infoLink: ''},
  ];

  const list2 = [
    {payName: '신용카드', payImage: 'pay_01.svg', infoLink: ''},
    {payName: 'SK PAY', payImage: 'pay_20.svg', infoLink: ''},
    {payName: 'TV페이', payImage: 'pay_09.svg', infoLink: ''},
    {payName: '삼성페이(카드)', payImage: 'pay_04.svg', infoLink: ''},
  ];

  const getList = (type: 'comission' | 'NoInterest') => {
    let rs = [];
    let arr: Array<InfoItemProps> = [];
    if(type === 'comission'){
      arr = list1;
    }
    else if(type === 'NoInterest'){
      arr = list2; 
    }
    for(let i=0;i<arr.length;i++){
      rs.push(
        <InfoItem
          payName={ arr[i]?.payName }
          payImage={ IMAGE_ROOT + '/' + arr[i]?.payImage }
          infoLink={ arr[i]?.infoLink }
        ></InfoItem>
      );
    }
    return rs;
  }


  return (
    <>
      <div className="ing-list">
        <div className="ing-title">서비스 이용, 수수료 및 정산주기</div>
        <ul className="ing-card-list">
          { getList('comission') }
        </ul>

        <div className="ing-title">가맹점 분담 무이자 정보</div>
        <ul className="ing-card-list">
          { getList('NoInterest') }
        </ul>
      </div>
    </>
  );
};