<script>
    import useSettings from '$lib/useSettings.svelte.js';
    const settings = useSettings();

    /**
     * @typedef {Object} Props
     * @property {any} [post]
     */

    /** @type {Props} */
    let { post = null } = $props();
</script>

{#if post?.preview?.has}
    <img class:max-h-dvh={settings.limitImageHeight} src={post.preview.url} alt={`Post ${post.id}`} />
{:else}
    {#if ['webm', 'mp4'].includes(post.file.ext)}
        <video class:max-h-dvh={settings.limitImageHeight} controls playsinline>
            <source src={post.file.url} />
        </video>
    {:else}
        <img class:max-h-dvh={settings.limitImageHeight} src={post.file.url} alt={`Post ${post.id}`} />
    {/if}
{/if}
