<script>
    import { STAMP_ICONS } from '$lib/utils/stampIcons.js';

    // stamp: { city, country, iconId, color } - see stamps.js for the shape
    // written to Firestore. iconId is looked up against STAMP_ICONS (falling
    // back to the first icon if it's ever missing/renamed).
    let { stamp } = $props();

    let icon = $derived(STAMP_ICONS.find(i => i.id === stamp.iconId) ?? STAMP_ICONS[0]);
</script>

<!-- round "passport stamp" badge: icon in the upper portion, city/country
     text below it, both inside the circle. Rotation/scatter positioning for
     the stamp book is applied by the parent (see StampBook page), not here -
     this component is just the badge itself. -->
<div class="stamp" style="background: {stamp.color}">
    <svg class="stamp-icon" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
        {@html icon.paths}
    </svg>
    <p class="stamp-place">
        <span class="city">{stamp.city}</span>
        <span class="country">{stamp.country}</span>
    </p>
</div>

<style>
    .stamp {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 22px;
        border: 2px solid rgba(255, 255, 255, 0.6);
        text-align: center;
        flex-shrink: 0;
        /* flat 2D style for now - shadow removed, paper-style shadows may be added later */
    }

    /* muted dark stroke so the icon reads clearly against any pastel fill */
    .stamp-icon {
        color: rgba(0, 0, 0, 0.35);
        margin-bottom: 6px;
    }

    .stamp-place {
        margin: 0;
        padding: 0 10px;
        line-height: 1.3;
        font-family: Georgia, 'Times New Roman', Times, serif;
    }

    .city {
        display: block;
        font-size: 0.78rem;
        font-weight: 700;
        color: #333;
    }

    .country {
        display: block;
        font-size: 0.62rem;
        color: #555;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
</style>
