<script setup lang="ts">
interface Story {
    source: string;
    time: string | null;
    headline: string;
    deck?: string | null;
    image?: string | null;
    link: string;
}

withDefaults(
    defineProps<{
        story: Story;
        variant?: 'hero' | 'banner' | 'feature' | 'standard' | 'brief';
    }>(),
    {
        variant: 'standard',
    },
);
</script>

<template>
    <a
        :href="story.link"
        target="_blank"
        rel="noopener noreferrer"
        class="card"
        :class="[
            `card--${variant}`,
            { 'card--no-image': variant !== 'brief' && !story.image },
        ]"
    >
        <div v-if="variant !== 'brief' && story.image" class="card-img">
            <img :src="story.image" :alt="story.headline" loading="lazy" />
        </div>
        <div class="card-body">
            <div class="card-source">{{ story.source }}</div>
            <div class="card-headline">{{ story.headline }}</div>
            <div v-if="variant === 'hero' && story.deck" class="card-deck">
                {{ story.deck }}
            </div>
            <div v-if="story.time" class="card-time">{{ story.time }}</div>
        </div>
    </a>
</template>

<style scoped lang="sass">
.card
    display: flex
    flex-direction: column
    text-decoration: none
    background: #F7F7F5

    &:hover
        background: #fff

.card-img
    width: 100%
    background: #DDDDD8
    overflow: hidden
    flex-shrink: 0

    img
        width: 100%
        height: 100%
        object-fit: cover
        display: block

.card-body
    padding: 0.85rem
    display: flex
    flex-direction: column
    gap: 5px
    flex: 1

.card-source
    font-size: 10px
    font-weight: 600
    letter-spacing: 1px
    text-transform: uppercase
    color: #C0392B

.card-headline
    font-family: Georgia, serif
    color: #111
    line-height: 1.3

.card-deck
    font-size: 13px
    color: #555
    line-height: 1.55

.card-time
    font-size: 10px
    color: #999
    margin-top: auto
    padding-top: 4px

// Hero: the big lead story
.card--hero
    .card-img
        height: 400px
    .card-headline
        font-size: 26px
        font-weight: 700

// Banner: full-width lead when the section has no true hero,
// needs a taller image than feature since it's stretched much wider
.card--banner
    .card-img
        height: 540px
    .card-headline
        font-size: 20px
        font-weight: 700

// Feature: supporting stories with a medium image
.card--feature
    .card-img
        height: 260px
    .card-headline
        font-size: 17px
        font-weight: 700

// Standard: small image, compact headline
.card--standard
    .card-img
        height: 150px
    .card-headline
        font-size: 13px
        font-weight: 700

// No image available: give the text more breathing room instead of
// leaving an empty gray box where a photo would have been
.card--no-image
    .card-body
        padding: 1rem 0.85rem
        justify-content: center

// Brief: text only, single row, no image at all
.card--brief
    flex-direction: row
    align-items: baseline
    justify-content: space-between
    gap: 12px
    background: transparent
    padding: 0.55rem 0
    border-bottom: 1px solid #E8E8E8

    &:hover
        background: transparent

        .card-headline
            text-decoration: underline

    .card-body
        padding: 0
        flex-direction: row
        align-items: baseline
        gap: 8px
        flex: 1

    .card-source
        display: none

    .card-headline
        font-size: 13px
        font-weight: 400
        flex: 1

    .card-time
        font-size: 10px
        color: #999
        padding-top: 0
        white-space: nowrap
</style>
