import Link from 'next/link'
import { m } from 'framer-motion'
import cx from 'classnames'

import { BREAKPOINTS, DEFAULT_SPRING_TRANSITION } from '@/lib/constants'
import { useOrb } from '@/lib/OrbContext'

import BlurImage from '@/components/shared/BlurImage'

type Props = {
  postType: 'case_study' | 'project'
  href: string
  image?: {
    alt: string
    imageUrl: string
    placeholder: string
  }
  title: string
  term?: string | null
  term2?: string | null
}

export default function ListingCard({ postType, href, image, title, term, term2 }: Props) {
  const { orbPointerEvents, orbClasses } = useOrb()

  return (
    <div className="relative flex flex-col w-full">
      <div className="relative aspect-4/3 mb-4 bg-gray-light" {...orbPointerEvents}>
        {image && (
          <BlurImage
            src={image.imageUrl}
            alt={image.alt}
            placeholderSrc={image.placeholder}
            fill
            className="object-cover"
            sizes={
              postType === 'case_study'
                ? `(min-width: ${BREAKPOINTS.sm}) 50vw, 100vw`
                : `(min-width: ${BREAKPOINTS.sm}) 33vw, 100vw`
            }
          />
        )}

        <Link
          href={href}
          className={cx(
            'block absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-10 transition-colors duration-300',
            orbClasses
          )}
        >
          <span className="sr-only">View {title}</span>
        </Link>
      </div>

      <h3 className="text-h10 pb-1">
        <Link href={href}>{title}</Link>
      </h3>

      <p className={term2 ? 'text-body-lg' : 'pb-5 text-body-lg'}>{term}</p>

      {term2 && <p className="pb-5 text-body-lg">{term2}</p>}

      <m.div
        className="h-1 w-full mt-auto bg-black origin-left"
        initial={{ opacity: 0, scaleX: 0 }}
        whileInView={{ opacity: 1, scaleX: 1 }}
        viewport={{
          once: true,
          margin: `0px 0px -10% 0px`,
        }}
        transition={DEFAULT_SPRING_TRANSITION}
        aria-hidden
      />
    </div>
  )
}