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

<script lang="ts">
    import { cx } from 'classix'
    import Image from '$components/atoms/Image.svelte'

    let {
        street,
        location,
        region,
        country,
        flagId,
        size,
        ...props
    }: {
        street: string
        location: string
        region?: string
        country: string
        flagId: string
        size?: string
        class?: string
    } = $props()

    const cardClass = 'postcard'
    const classes = $derived(cx(
        cardClass,
        ...[size].map(variant => variant && `${cardClass}--${variant}`),
        props.class,
    ))
</script>

<div class={classes}>
    <div class="postcard__left">
        <p class="postcard__country">
            <span>Houses of</span><br>
            <strong class="title-country__purple">{country}</strong>
        </p>
    </div>
    <div class="postcard__right">
        <div class="postcard__stamp">
            <div class="frame">
                <img src="/images/icons/stamp.svg" width="32" height="42" alt="Stamp">
            </div>
            <Image
                class="flag"
                id={flagId}
                sizeKey="square-small"
                width={32} height={32}
                alt="Flag of {country}"
            />
        </div>
        <ul class="postcard__address">
            <li>{street}</li>
            <li>{location}{region ? `, ${region}` : ''}</li>
        </ul>
    </div>
</div>
