import { motion } from "framer-motion";

interface ExampleCardProps {
  title: string;
  company: string;
  image: string;
}

function ExampleCard({ title, company, image }: ExampleCardProps) {
  return (
    <div className="flex flex-col gap-4 xl:mb-16 sm:mb-10 mb-8">
      <motion.div
        initial={{ opacity: 0, translateY: 64 }}
        whileInView={{ opacity: 1, translateY: 0 }}
        viewport={{ once: true, margin: "-10%" }}
        transition={{ duration: 1, ease: [0.58, 0.12, 0.27, 0.98] }}
        className="aspect-video bg-cover bg-center bg-no-repeat"
        style={{ backgroundImage: `url('${image}')` }}
      ></motion.div>
      <motion.div
        initial={{ opacity: 0, translateY: 64 }}
        whileInView={{ opacity: 1, translateY: 0 }}
        viewport={{ once: true, margin: "-10%" }}
        transition={{ duration: 1, ease: [0.58, 0.12, 0.27, 0.98], delay: 0.2 }}
        className="flex flex-col gap-1"
      >
        <p className="font-medium xl:text-xl text-base font-gilroy">{title}</p>
        <p className="xl:text-sm text-xs">{company}</p>
      </motion.div>
    </div>
  );
}

export default ExampleCard;