import styles from "./styles.module.scss"
import { ContactPerson } from '@/payload-types'
import Image, { StaticImageData } from 'next/image'
import { SecureEmail } from '@/components/SecureEmail/SecureEmail'
import { extractEmailPartsEncoded } from '@/utils/dto/email'

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

  const { user, domain } = contact.email ? extractEmailPartsEncoded(contact.email) : { user: '', domain: '' }

  return (
    <div className={styles.contact}>
      { photo &&
          <Image
            className={styles.photo}
            src={photo}
            alt={contact.name}
            unoptimized={false}
          />
      }
      <div>
        {contact.name}
        {user && domain &&
          <>
            <br/> ✉️ <SecureEmail user={user} domain={domain} />
          </>
        }
        {
          contact.telephone &&
          <>
            <br/> <a href={`tel:${contact.telephone}`}>{contact.telephone}</a>
          </>
        }
      </div>
    </div>
  )
}