'use client'

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

interface AccessMoneyProps {
  subTitle: string
  title: string
  description: string
  image: string
  cards: AccessMoneyCard[]
}

export const AccessMoney = ({ subTitle, title, description, image, cards }: AccessMoneyProps) => {
    return (
        <section className='stack bg-[#F5F5F5]  pb-20 md:pb-24 xl:pb-[150px]'>
            <div className='space-y-[30px] md:space-y-16 xl:space-y-[100px] container'>
              <motion.div
                initial={{ opacity: 0, y: 36 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, amount: 0.25 }}
                transition={{ duration: 0.65, ease: 'easeOut' }}
                className='flex flex-col justify-between gap-10 md:gap-[50px] lg:flex-row lg:items-start 2xl:gap-[161px]'
              >
                <SectionLabel
                    className='space-y-5'
                    label={subTitle}
                    textclass='max-w-[45rem] min-[1900px]:max-w-[38rem]'
                    title={<span dangerouslySetInnerHTML={{ __html: title.replace('<span>', '<span class="gradient-text-green">') }} />}
                    description={description}
                />
                <Image src={image} alt='Paysey digital wallet and physical payment access network' width={778} height={500} className='h-auto w-full lg:max-w-[48%] xl:max-w-[778px]' />
              </motion.div>

              <div className=' grid overflow-hidden rounded-[20px] border border-[#C6DBC6] bg-[#EDF3ED] sm:grid-cols-2 lg:grid-cols-4 '>
                {cards.map((item, index) => (
                  <motion.article
                    key={item.access_your_money_title}
                    initial={{ opacity: 0, y: 28 }}
                    whileInView={{ opacity: 1, y: 0, transition: { duration: 0.45, delay: index * 0.08, ease: 'easeOut' } }}
                    whileHover={{ y: -6, transition: { duration: 0.18, delay: 0 } }}
                    viewport={{ once: true, amount: 0.25 }}
                    className='group space-y-4 border-b border-[#C6DBC6] p-4 transition-colors duration-300 last:border-b-0 sm:[&:nth-child(odd)]:border-r sm:[&:nth-last-child(-n+2)]:border-b-0 md:space-y-5 lg:border-b-0 lg:border-r lg:last:border-r-0 xl:p-[30px] cursor-pointer'
                  >
                    <Image src={item.access_your_money_image} alt='' width={100} height={100} className='h-[60px] object-contain object-left transition-transform duration-300 ease-out group-hover:scale-105 md:h-[70px] xl:h-[100px]' />
                    <div className='space-y-2.5'>
                      <Text size='body' fontWeight={700} textKey={item.access_your_money_title} />
                      <Text size='normal' className='text-muted' textKey={item.access_your_money_description} />
                    </div>
                  </motion.article>
                ))}
              </div>
            </div>
        </section>
    )
}