import React from 'react';
import PropTypes from 'prop-types';
import parse from 'react-html-parser';
import './style.css';

var timeFormat = new Intl.DateTimeFormat('en-US', {
  hour12: true,
  hour: 'numeric',
  minute: 'numeric'
});
var dateFormat = new Intl.DateTimeFormat('en-US', {
  weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
});

var EventTime = function EventTime(props) {
  var startDate = props.startDate,
      endDate = props.endDate,
      details = props.details;

  return React.createElement(
    'span',
    { className: 'ma__event-time' },
    React.createElement(
      'div',
      { className: 'ma__event-time__calendar' },
      React.createElement(
        'div',
        { className: 'ma__event-time__date' },
        dateFormat.format(startDate)
      ),
      React.createElement(
        'div',
        { className: 'ma__event-time__time' },
        timeFormat.format(startDate) + ' - ' + timeFormat.format(endDate)
      )
    ),
    details && React.createElement(
      'p',
      { className: 'ma__contact__details' },
      parse(details)
    )
  );
};

EventTime.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The start date of the event. */
  startDate: PropTypes.instanceOf(Date).isRequired,
  /** The end date of the event. */
  endDate: PropTypes.instanceOf(Date).isRequired,
  /** Details around the event. */
  details: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
} : {};

export default EventTime;