<style lang="scss" src="./NewsletterIssue.scss"></style>

<script lang="ts">
    import dayjs from 'dayjs'
    import Image from '$components/atoms/Image.svelte'

    let {
        title,
        issue,
        date,
        link,
        thumbnail,
        size,
    }: {
        title: string
        issue: number
        date: string
        link: string
        thumbnail: { id: string }
        size?: string
    } = $props()
</script>

<div class="issue" class:is-large={size === 'large'}>
    <a href={link} target="_blank" rel="external noopener" tabindex="0">
        <Image
            id={thumbnail.id}
            sizeKey="issue-thumbnail-small"
            width={160} height={112}
            alt="Issue {issue} thumbnail"
        />
        <dl>
            <dt>Issue #{issue}</dt>
            <dd>
                <p>{title}</p>
                <time>{dayjs(date).format('DD/MM/YYYY')}</time>
            </dd>
        </dl>
    </a>
</div>
