'use client'

import React from 'react'
import Image from 'next/image'
import { SectionLabel, Text } from '@/components/ui'
import { motion } from 'motion/react'
import type { WhyPayseyItem } from '@/types/about'

const viewportConfig = { once: false, amount: 0.2 }

interface WhyPaySeyProps {
  badge: string
  title: string
  description: string
  items: WhyPayseyItem[]
}

export const WhyPaySey = ({ badge, title, description, items }: WhyPaySeyProps) => {
  return (
    <section className='stack'>
      <div className='bg-[#F5F5F5] py-20 md:py-24 xl:py-[150px]'>
        <div className='container'>
          <div className='flex-center flex-col text-center'>
            <SectionLabel
              label={badge}
              title={<span dangerouslySetInnerHTML={{ __html: title.replace('<span>', '<span class="gradient-text-green">') }} />}
              description={description}
              titleClassName='max-w-[40rem]'
              descriptionClassName='max-w-[60rem]'
              textclass='text-center mx-auto'
              className='flex-center flex-col'
            />
          </div>
          <div className='grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-5 lg:gap-[30px] stackinline'>
            {items.map((item, i) => (
              <motion.div
                key={`${item.why_paysey_item_title}-${i}`}
                initial={{ opacity: 0, scale: 0.92 }}
                whileInView={{ opacity: 1, scale: 1 }}
                viewport={viewportConfig}
                transition={{ duration: 0.45, ease: [0.25, 0.1, 0.25, 1], delay: i * 0.1 }}
                whileHover={{ y: -6, boxShadow: '0 12px 32px rgba(0,0,0,0.12)' }}
                className='bg-white rounded-[15px] p-[30px] flex flex-col gap-10 2xl:h-[384px] justify-between'
              >
                {item.why_paysey_item_icon.url && (
                  <Image
                    src={item.why_paysey_item_icon.url}
                    alt={item.why_paysey_item_icon.alt || item.why_paysey_item_title}
                    width={100}
                    height={100}
                    className='w-[100px] h-[100px] object-contain'
                  />
                )}
                <div className='space-y-2.5'>
                  <Text size='h3' fontWeight={600}>{item.why_paysey_item_title}</Text>
                  <Text size='normal'>{item.why_paysey_item_description}</Text>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}