<script>
    import { browser } from "$app/environment";

    
    
    
    /**
     * @typedef {Object} Props
     * @property {any} [datetime]
     * @property {string} [display]
     * @property {any} [timeZone]
     */

    /** @type {Props} */
    let { datetime = undefined, display = "date", timeZone = undefined } = $props();

    const date = datetime ? Date.parse(datetime) : Date.now();

    /** @type Intl.DateTimeFormatOptions */
    let options;
    switch (display) {
        case "date":
            options = { dateStyle: "short", timeZone };
            break;
        case "dateTime":
            options = { dateStyle: "short", timeStyle: "short", timeZone };
            break;
        case "time":
            options = { timeStyle: "short", timeZone };
            break;
    }

    const formattedDate = Intl.DateTimeFormat(
        browser ? navigator.language : "en",
        options,
    ).format(date);
</script>

<time {datetime}>{formattedDate}</time>
