import styles from './styles.module.scss'
import { ContactPerson } from '@/payload-types'
import Image, { StaticImageData } from 'next/image'

type ContactPersonCardProps = {
  contact: null | string | undefined | ContactPerson
  photo?: StaticImageData
}

export const ContactPersonCard = ({
  contact,
  photo,
}: ContactPersonCardProps) => {
  if (
    contact === null ||
    contact === undefined ||
    typeof contact === 'string'
  ) {
    return null
  }

  return (
    <div className={styles.card}>
      <div>
        {photo && (
          <Image
            className={styles.photo}
            src={photo}
            alt={contact.name}
            width={200}
            height={200}
            unoptimized={true}
          />
        )}
      </div>

      <div>
        {contact.role && (
          <h3 className={styles.role}>{contact.role}</h3>
        )}
        <div className={styles.info}>
          <span className={styles.name}>{contact.name}</span>
          {contact.email && (
            <a href={`mailto:${contact.email}`} className={styles.link}>
              {contact.email}
            </a>
          )}
          {contact.telephone && (
            <a href={`tel:${contact.telephone}`} className={styles.link}>
              {contact.telephone}
            </a>
          )}
      </div>

      </div>
    </div>
  )
}