import React from 'react';
import Image from 'next/image';
import { InfoIcon } from 'lucide-react';
import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import useDevice from '@/core/hooks/useDevice';

const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
  const { isMobile } = useDevice();
  return (
    <>
      <h1 className='text-h-sm md:text-h-lg font-semibold py-4'>
        {' '}
        Serba Serbi Promo
      </h1>
      <div className='px-4 sm:px-0'>
        {/* <div className='w-full h-full '>
              <div
                onClick={() => onSelectPromo('Diskon')}
                className={`border p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Diskon' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
              >
                <div>
                  <Image
                    width={24}
                    height={24}
                    quality={100}
                    src='/images/icon_promo/diskon.svg'
                    alt=''
                    className='h-12 w-12 rounded'
                  />
                </div>
                <div>
                  <div className='flex w-full flex-row items-center justify-start'>
                    <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Diskon' ? 'text-red-500' : 'text-gray-900'}`}>Spesial Diskon</h1>
                    <InfoIcon className='mt-[1px] text-red-500' size={14} />
                  </div>
                  <p className={`text-xs md:text-sm ${selectedPromo === 'Diskon' ? 'text-red-500' : 'text-gray-500'}`}>
                  Harga lebih murah dan pasti makin hemat belinya..
                  </p>
                </div>
              </div>
            </div> */}

        <Swiper slidesPerView={isMobile ? 1.3 : 3} spaceBetween={10}>
          <SwiperSlide>
            <div className='w-full h-full  '>
              <div
                onClick={() => onSelectPromo('Bundling')}
                className={`border h-full p-1 flex items-center gap-x-2 rounded-lg cursor-pointer ${
                  selectedPromo === 'Bundling'
                    ? 'bg-red-50 border-red-500 text-red-500'
                    : 'border-gray-200 text-gray-900'
                }`}
              >
                <div>
                  <Image
                    width={24}
                    height={24}
                    quality={85}
                    src='/images/icon_promo/silat.svg'
                    alt=''
                    className='h-12 w-12 rounded'
                  />
                </div>
                <div>
                  <div className='flex w-full flex-row items-center  justify-start'>
                    <h1
                      className={`mr-1 font-semibold text-base ${
                        selectedPromo === 'Bundling'
                          ? 'text-red-500'
                          : 'text-gray-900'
                      }`}
                    >
                      Paket Silat
                    </h1>
                    <InfoIcon className='mt-[1px] text-red-500' size={14} />
                  </div>
                  <p
                    className={`text-xs md:text-sm ${
                      selectedPromo === 'Bundling'
                        ? 'text-red-500'
                        : 'text-gray-500'
                    }`}
                  >
                    Pilihan bundling barang kombinasi Silat.
                  </p>
                </div>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className='w-full h-full '>
              <div
                onClick={() => onSelectPromo('Loading')}
                className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${
                  selectedPromo === 'Loading'
                    ? 'bg-red-50 border-red-500 text-red-500'
                    : 'border-gray-200 text-gray-900'
                }`}
              >
                <div>
                  <Image
                    width={24}
                    height={24}
                    quality={85}
                    src='/images/icon_promo/barong.svg'
                    alt=''
                    className='h-12 w-12 rounded'
                  />
                </div>
                <div>
                  <div className='flex w-full flex-row items-center justify-start'>
                    <h1
                      className={`mr-1 font-semibold text-base ${
                        selectedPromo === 'Loading'
                          ? 'text-red-500'
                          : 'text-gray-900'
                      }`}
                    >
                      Paket Barong
                    </h1>
                    <InfoIcon className='mt-[1px] text-red-500' size={14} />
                  </div>
                  <p
                    className={`text-xs md:text-sm ${
                      selectedPromo === 'Loading'
                        ? 'text-red-500'
                        : 'text-gray-500'
                    }`}
                  >
                    Beli banyak barang/partai barang borong.
                  </p>
                </div>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className='w-full h-full '>
              <div
                onClick={() => onSelectPromo('Merchandise')}
                className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${
                  selectedPromo === 'Merchandise'
                    ? 'bg-red-50 border-red-500 text-red-500'
                    : 'border-gray-200 text-gray-900'
                }`}
              >
                <div>
                  <Image
                    width={24}
                    height={24}
                    quality={85}
                    src='/images/icon_promo/angklung.svg'
                    alt=''
                    className='h-12 w-12 rounded'
                  />
                </div>
                <div>
                  <div className='flex w-full flex-row items-center justify-start '>
                    <h1
                      className={`mr-1 font-semibold text-base ${
                        selectedPromo === 'Merchandise'
                          ? 'text-red-500'
                          : 'text-gray-900'
                      }`}
                    >
                      Paket Angklung
                    </h1>
                    <InfoIcon className='mt-[1px] text-red-500' size={14} />
                  </div>
                  <p
                    className={`  m1 text-xs md:text-sm ${
                      selectedPromo === 'Merchandise'
                        ? 'text-red-500'
                        : 'text-gray-500'
                    }`}
                  >
                    Gratis barang promosi/merchandise menang langsung.
                  </p>
                </div>
              </div>
            </div>
          </SwiperSlide>
        </Swiper>
      </div>
    </>
  );
};

export default PromotionProgram;