import { motion } from 'framer-motion';
import React from 'react';
import { gridVariants } from '@/lib/animations';

interface FieldCardProps {
  iconSrc: string;
  iconAlt: string;
  color: string;
  value: string;
}

const FieldCard: React.FC<FieldCardProps> = ({
  iconSrc,
  iconAlt,
  color,
  value,
}) => {
  // const classname = `bg-${color}-100 rounded-full p-4`;
  return (
    <motion.figure
      variants={gridVariants}
      initial="hidden"
      whileInView="show"
      viewport={{ once: true, amount: 0.2 }}
      className="max-w-80 aspect-video p-[40px] sm:p-[50px]  rounded-2xl border-2 border-gray-300 flex-col justify-around items-center  inline-flex"
    >
      <img draggable="false" src={iconSrc} alt={iconAlt} className={`bg-${color}-100 rounded-full p-4`} />
      <h3 className=" text-secondary font-extrabold">{value}</h3>
    </motion.figure>
  );
};

export default FieldCard;