---
import { Picture } from "astro:assets";

interface Props {
    title: string;
    image: {
        src: ImageMetadata;
        alt: string;
    };
    items: Array<string>;
}

const { title, image, items } = Astro.props;
---

<div class="card">
    <Picture class="image" src={image.src} alt={image.alt} />

    <h3 class="heading-gradient">{title}</h3>

    {
        !!items.length ? (
            <ul class="list">
                {items.map((item) => (
                    <li class="item">{item}</li>
                ))}
            </ul>
        ) : null
    }
</div>

<style>
    .card {
        display: grid;
        grid-template-rows: auto 1fr auto;
        max-height: 24rem;

        & > * {
            grid-column: 1;
        }

        @media screen and (min-width: 64rem) {
            min-height: 36rem;
        }
    }

    @media (prefers-reduced-motion: no-preference) and (hover: hover) {
        .card:hover {
            & picture:after {
                backdrop-filter: blur(12px);
            }
        }
    }

    picture {
        display: block;
        grid-row: 1 / -1;
        position: relative;
        z-index: -1;
    }

    picture::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: var(--gradient-overlay);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        transition: all;
        transition-duration: 300ms;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .image {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 100%;
        object-fit: cover;
    }

    h3 {
        grid-row: 1;
        font-size: 2.25rem;
        line-height: var(--leading-title);
        padding-block: 2.5rem 1rem;
        padding-inline: 2.5rem;
        max-width: 10ch;
    }

    ul {
        display: grid;
        gap: 1.25rem;
        grid-row: 3;
        list-style: none;
        padding: 2.5rem;
    }

    li {
        max-width: 26ch;
        font-size: 1.125rem;
        line-height: 1;
    }
</style>