---
import type { ImageMetadata } from 'astro';

interface Props {
    title: string;
    content?: string | null;
    image?: ImageMetadata | { url: string; alt?: string } | null;
}

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

<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center opacity-0 animate-staggerFadeIn">
    <div class="space-y-5 opacity-0 animate-slideInRight">
        <h2 class="text-3xl font-semibold text-gray-800">
            {title}
        </h2>
        {content && (
                <div class="prose prose-lg max-w-none text-gray-600">
                    {content}
                </div>
        )}
    </div>

    {image && (
            <div class="story-image relative h-80 w-full rounded-2xl overflow-hidden shadow-xl opacity-0 animate-slideInLeft">
                <img
                        src={typeof image === 'object' && 'src' in image ? image.src : (image as any).url}
                        alt={typeof image === 'object' && 'alt' in image ? image.alt : title}
                        class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
                        loading="eager"
                />
                <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
            </div>
    )}
</div>
