import React from 'react';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
import { isValidDateTimeNumber } from '../../common/utils';
var timeOptions = {
  hour12: false,
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
};
var StyledSpan = styled.span.withConfig({
  displayName: "Time__StyledSpan",
  componentId: "sc-1jlv74i-0"
})(["color:", ";"], function (p) {
  return p.theme.color.text;
});
var Time = function Time(_ref) {
  var value = _ref.value,
    _ref$invalidValue = _ref.invalidValue,
    invalidValue = _ref$invalidValue === void 0 ? '-' : _ref$invalidValue;
  var intl = useIntl();
  return isValidDateTimeNumber(value) ? React.createElement(StyledSpan, null, React.createElement("time", null, intl.formatTime(value, timeOptions))) : React.createElement(StyledSpan, null, invalidValue);
};
export default Time;