import React from "react";
import { motion } from "framer-motion";

interface CardProps {
  number: string;
  heading: string;
  description: string;
  numberBgColor: string;
  numberTextColor: string;
}

const InfoCard: React.FC<CardProps> = ({
  number,
  heading,
  description,
  numberBgColor,
  numberTextColor,
}) => {
  return (
    <motion.div
      className="w-full p-6 my-4 bg-white rounded-lg shadow-md"
      initial={{ opacity: 0, y: 50 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 1 }}
      viewport={{ once: true }}
    >
      <div className="flex items-center space-x-4">
        <div
          className="w-12 h-12 flex items-center justify-center rounded-md font-orbitron text-xl font-bold"
          style={{ backgroundColor: numberBgColor, color: numberTextColor }}
        >
          <p>{number}</p>
        </div>
        <h3 className="text-2xl font-semibold text-gray-800">{heading}</h3>
      </div>
      <p className="mt-4 text-lg text-left text-gray-600">{description}</p>
    </motion.div>
  );
};

export default InfoCard;
