import React from 'react';
import Image from 'next/image';
import { InfoIcon } from "lucide-react";
import MobileView from '../../../../src/core/components/views/MobileView';
import DesktopView from '@/core/components/views/DesktopView';
import { Swiper, SwiperProps, SwiperSlide }  from 'swiper/react';
import 'swiper/css';

const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
  return (
    <>
      <div className="text-h-sm md:text-h-lg font-semibold py-4">Serba Serbi Promo</div>
      <div className='px-4 sm:px-0'>
        <DesktopView>
          <div className='grid md:grid-cols-3 grid-cols-2 justify-between h-[90px] gap-3 items-center'>
          {/* <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> */}
            <div className='w-full h-full  '>
              <div
                onClick={() => onSelectPromo('Bundling')}
                className={`border h-full p-2 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={100}
                    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>
            <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={100}
                    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>
            <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={100}
                    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>
          </div>
        </DesktopView>
        <MobileView>
          <Swiper slidesPerView={1.75} 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={100}
                      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={100}
                      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={100}
                      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>
        </MobileView>
      </div>
    </>
  );
};

export default PromotionProgram;