import React from 'react';
import Image from 'next/image';
import { InfoIcon } from "lucide-react"

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'>
        <div className='grid md:grid-cols-3 grid-cols-2 justify-between gap-2 items-center'>
        <div className='w-full'>
            <div
              onClick={() => onSelectPromo('Bundling')}
              className={`border 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-20 w-20 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'>
            <div
              onClick={() => onSelectPromo('Loading')}
              className={`border p-2 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-20 w-20 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'>
            <div
              onClick={() => onSelectPromo('Merchandise')}
              className={`border p-2 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-20 w-20 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>
      </div>
    </>
  );
};

export default PromotionProgram;