import React from 'react';
import { style } from 'app/styles';

export interface DateTimeProps {
  value: Date;
  // see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
  displayOptions?: object;
  style?: object;
}

const defaultDisplayOptions = {
  year: 'numeric',
  month: 'short',
  day: 'numeric',
  hour: 'numeric',
};

// numbers for humans have commas
export const DateTime = (props: DateTimeProps): JSX.Element => {
  const displayOptions = Object.assign(
    {},
    defaultDisplayOptions,
    props.displayOptions
  );
  const humanDateTime = props.value.toLocaleString('en-US', displayOptions);
  return <span style={style(props.style)}>{humanDateTime}</span>;
};

DateTime.displayName = 'DateTime';