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

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

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

type Props = {
  image?: {
    imageUrl: string
    alt: string
    placeholder: string
  }
  title?: string
  blurb?: string
  description?: string
  link?: {
    title?: string
    url: string
  }
}

export default function Award({ image, title, blurb, description, link }: Props) {
  return (
    <div className="sm:flex">
      <div className="w-full sm:w-1/5 max-sm:pb-8">
        <div className="relative w-full aspect-square bg-gray-light">
          {image && (
            <BlurImage
              src={image.imageUrl}
              alt={image.alt}
              placeholderSrc={image.placeholder}
              fill
              className="object-cover"
              sizes={`(min-width: ${BREAKPOINTS.sm}) 20vw, 100vw`}
            />
          )}
        </div>
      </div>

      <div className="flex flex-col flex-1 gap-4 sm:pl-8 md:pl-16">
        <h3 className="text-subtitle">{title}</h3>

        <m.div
          className="w-full h-px 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
        />

        {blurb && <p className="text-body font-medium">{blurb}</p>}

        {description && <ParseContent content={description}></ParseContent>}

        {link?.title && (
          <Link href={link.url} className="text-body-lg font-semibold">
            {link.title}
          </Link>
        )}
      </div>
    </div>
  )
}