import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled from 'styled-components';
import { useConfiguration, useI18n } from '../../hooks';
import NoValue from '../NoValue/NoValue';
import cap from '../../utils/cap';
import { parseToDate } from './Input/utils';
import { isValidDate } from './Picker/utils';
import { formatDateTime } from './utils';
export const StyledDateTimeDisplay = styled.span ``;
const DateTimeDisplay = forwardRef(function DateTimeDisplay({ value, variant, format = 'medium', clockFormat, ...restProps }, ref) {
    const { locale } = useConfiguration();
    const t = useI18n();
    return (_jsx(StyledDateTimeDisplay, { ref: ref, ...restProps, children: (value || value === 0) && isValidDate(parseToDate(value)) ? (cap(formatDateTime(parseToDate(value), {
            t,
            locale,
            format,
            variant,
            clockFormat,
            timeZone: 'UTC'
        }))) : (_jsx(NoValue, {})) }));
});
export default DateTimeDisplay;
//# sourceMappingURL=DateTimeDisplay.js.map