interface IProps {
  title: string;
  description: string;
  imgSrc: string;
  delay: string;
}

const Card = ({ title, description, imgSrc, delay }: IProps) => {
  return (
    <div
      className="flex flex-col justify-end flex-1 h-full border-solid border shadow-lg bg-cover bg-center text-center"
      style={{
        backgroundImage: `url(${imgSrc})`,
        filter: "saturate(50%)",
        animation: `fadeEffect 1s ${delay} forwards`,
        opacity: 0,
      }}
    >
      <div className="lg:my-6">
        <h2
          className="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]
 text-3xl font-bold"
        >
          {title}
        </h2>
        <p
          className="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]
 xl:mb-10 font-thin text-xl"
        >
          {description}
        </p>
      </div>
    </div>
  );
};

export default Card;
