|

import { motion } from 'framer-motion'
import { useInView } from 'react-intersection-observer'

interface ProjectProps {
  title: string
  url: string
  description: string
  year: number
}

const ProjectCard = ({
  title, url, description
}: ProjectProps) => {
  const [ref, inView] = useInView({
    threshold: 0.2,
    triggerOnce: true
  })

  return (
    <motion.a
      ref={ref}
      href={url}
      initial={{ opacity: 0, y: 40 }}
      animate={inView
        ? { opacity: 1, y: 0 }
        : undefined}
      transition={{
        duration: 0.6,
        ease: [0.16, 1, 0.3, 1]
      }}
    >
      <h3>{title}</h3>
      <p>{description}</p>
    </motion.a>
  )
}