import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { FavoriteItem } from './favorite-item';
import { FavoriteItemProps } from '../model/types'


export const FavoriteWrapper = () => {
  const items: Array<FavoriteItemProps> = [
    {img: IMAGE_ROOT + '/ico_menu_01.svg', text: '지급대행'},
    {img: IMAGE_ROOT + '/ico_menu_02.svg', text: '거래내역조회'},
    {img: IMAGE_ROOT + '/ico_menu_03.svg', text: '정산달력'},
    {img: IMAGE_ROOT + '/ico_menu_02.svg', text: '거래내역조회'},
    {img: IMAGE_ROOT + '/ico_menu_03.svg', text: '정산달력'}
  ];

  const itemAdd = {
    img: IMAGE_ROOT + '/ico_menu_plus.svg',
    text: '편집하기'
  };

  const getItems = () => {
    let rs = [];
    for(let i=0;i<items.length;i++){
      let img = items[i]?.img;
      let text = items[i]?.text;
      let key = 'slide-key-'+i;
      rs.push(
        <SwiperSlide
          key={ key }
        >
          <FavoriteItem 
            img={ img } 
            text={ text }
          ></FavoriteItem>
        </SwiperSlide>
      );
    }
    
    return rs;
  };

  return (
    <>
      <Swiper 
        spaceBetween={9}
        slidesPerView={4}
        onSlideChange={() => console.log('slide change')}
      >
        { getItems() }
        <SwiperSlide>
          <FavoriteItem
            img={ itemAdd.img }
            text={ itemAdd.text }
          ></FavoriteItem>
        </SwiperSlide>
      </Swiper>
    </>
  );
};
