<script>
    /** @type string | undefined */
    export let datetime = undefined;
    /** @type "date" | "dateTime" | "time" */
    export let display = "date";
    /** @type string | undefined */
    export let timeZone = undefined;

    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(
        navigator.language,
        options,
    ).format(date);
</script>

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