import React from 'react'

type Props = {
  name: string | undefined;
  email?: string | undefined;
  phoneNumber?: string | undefined;
  role: 'maker' | 'retailer' | 'courier'
}

const roleLabels = {
  maker: "Maker",
  retailer: "Retailer",
  courier: "Courier",
}

export default function Contacts(props: Props) {
  return (
    <div className='flex flex-col'>
      {props.name && <p className='text-sm font-light'>{roleLabels[props.role]}:</p>}
      {props.name && <h2 className='text-xl font-bold underline-offset-2 underline py-2'>{props.name}</h2>}
      {props.phoneNumber && <p>Phone Number: <span className='font-semibold'>{props.phoneNumber}</span></p>}
      {props.email && <p>Email: <span className='font-semibold'>{props.email}</span></p>}
    </div>
  )
}