import { SectionLabel, Text } from '@/components/ui'
import Image from 'next/image'
import React from 'react'
import type { RewardsCard } from '@/types/home'

interface RewardsBenefitsProps {
  subTitle: string
  title: string
  description: string
  cards: RewardsCard[]
}

export const RewardsBenefits = ({ subTitle, title, description, cards }: RewardsBenefitsProps) => {
  return (
    <div id='rewards' className='stack container '>
      <SectionLabel
        label={subTitle}
        textclass='mx-auto text-center '
        className='flex-center flex-col space-y-5'
        title={<span dangerouslySetInnerHTML={{ __html: title.replace('<span>', '<span class="gradient-text-green">') }} />}
        description={description}
      />
    <div className='grid grid-cols-1 md:grid-cols-3 gap-3 xl:gap-[50px] stackinline'>
      {
        cards.map((n, i) => (
          <div key={i} className='bg-[#F5F5F5] border border-[#DFDFDF] p-2 md:p-[15px] rounded-[30px] space-y-2.5'>
            <div className='flex-center'>
              <Image src={n.rewards_image} alt={n.rewards_title} width={400} height={320} className='h-[208px] xl:h-[320px] object-contain' />
            </div>
            <div className='bg-white p-5 rounded-[15px] space-y-1 md:space-y-2.5'>
              <Text size='body' fontWeight={700} textKey={n.rewards_title}/>
              <Text size='normal' className='text-muted' textKey={n.rewards_description}/>
            </div>
          </div>
        ))
      }
    </div>
    </div>
  )
}