import { Media } from '@/payload-types'
import ImageLoader from '../../../lib/utils/ImageLoader'
import { motion } from 'framer-motion'
interface Props {
  caption: string
  photo: string | Media
  isActive?: boolean
}

import React, { memo } from 'react'

export const RequirementCard: React.FC<Props> = memo(({ caption, photo, isActive }) => {
  return (
    <article className="rounded-[12px] overflow-hidden shadow-[0px_8px_16px_0px_#221D1A14] relative h-[220px] md:h-[326px] w-full">
      {/* <ImageLoader
        media={photo}
        alt=""
        className={`absolute inset-0 w-full h-full object-cover transition-transform duration-700 ease-in-out `}
        style={{ willChange: 'transform', transform: isActive ? 'scale(1.2)' : 'scale(1)' }}
      /> */}
      <motion.div
        className="absolute inset-0 w-full h-full"
        initial={{ scale: 1 }}
        animate={{ scale: isActive ? 1.2 : 1 }}
        transition={{ duration: 0.5, ease: 'easeInOut' }}
        style={{ willChange: 'transform' }}
      >
        <ImageLoader
          media={photo}
          alt=""
          className="w-full h-full object-cover"
        />
      </motion.div>
      <h3 className="absolute bottom-0 left-0 w-full p-4 bg-[#2928287A] backdrop-blur-[48px] z-10 m-0  b3-medium text-white">
        {caption}
      </h3>
    </article>
  )
})

RequirementCard.displayName = 'RequirementCard'
