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

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

export const ContactPerson2 = ({contact, photo}: ContactPerson2Props) => {
  if (contact === null || contact === undefined || typeof contact === 'string') {
    return "Unbekannt"
  }

  return (
    <div className={styles.contact}>
      { photo &&
          <Image
            className={styles.photo}
            src={photo}
            alt={contact.name}
            unoptimized={true}
          />
      }
      <div>
        {contact.name}
        {contact.email &&
          <>
            <br/> <a href={`mailto:${contact.email}`} className={styles.hover}>{contact.email}</a>
          </>
        }
        {
          contact.telephone &&
          <>
            <br/> <a href={`tel:${contact.telephone}`}>{contact.telephone}</a>
          </>
        }
      </div>
    </div>
  )
}