import { formatTimestamp } from '@/analyst/utilities'
import { css } from '@emotion/css'
import type { FC } from 'react'

type ValueType = string | number | boolean | Date | null
const formatValue = (value: ValueType) => {
  if (value === null) return ''
  if (typeof value === 'string') return value
  if (typeof value === 'number') return value.toString()
  if (typeof value === 'boolean') return value ? 'yes' : 'no'
  return formatTimestamp(value.toISOString())
}

interface UserDetailRowProps {
  name: string
  value: ValueType
}

const detailRowName = css`
  font-weight: bolder;
`

const UserDetailRow: FC<UserDetailRowProps> = ({ name, value }) => (
  <div>
    <span className={detailRowName}>{name}: </span> {formatValue(value)}
  </div>
)

export default UserDetailRow
