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

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

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

type Props = {
  image?: {
    alt: string
    imageUrl: string
    placeholder: string
  }
  name: string
  jobtitle: string
  phone: string
  email: string
}

export default function MemberCard({ image, name, jobtitle, phone, email }: Props) {
  return (
    <div className="relative flex flex-col w-full">
      <div className="relative aspect-[4/5] mb-4 bg-gray-light">
        {image && (
          <BlurImage
            src={image.imageUrl}
            alt={image.alt}
            placeholderSrc={image.placeholder}
            fill
            className="object-cover"
            sizes={`(min-width: ${BREAKPOINTS.sm}) 33vw, min-width: ${BREAKPOINTS.md}) 50vw, 100vw`}
          />
        )}
      </div>

      <h3 className="text-h10 pb-1">{name}</h3>

      <p className={jobtitle ? 'text-body-lg' : 'pb-5 text-body-lg'}>{jobtitle}</p>
      <Link className={phone ? 'text-body-lg' : 'pb-5 text-body-lg'} href={`tel:+${phone}`}>
        {phone}
      </Link>
      {email && (
        <Link className="pb-5 text-body-lg underline" href={`mailto: ${email}`}>
          {email}
        </Link>
      )}

      <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>
  )
}