import { useReveal, Icons, getBootstrap } from './atoms.jsx';

function NewsCard({ tag, tagType, date, title, excerpt, featured, image_url }) {
    const ref = useReveal();
    return (
        <article className={`news-card reveal ${featured ? 'featured' : ''}`} ref={ref}>
            <div className="news-meta">
                <span className={`news-tag ${tagType || 'patch'}`}>{tag}</span>
                {date && <span>{date}</span>}
            </div>
            {featured && image_url && (
                <div
                    className="news-placeholder"
                    style={{
                        backgroundImage: `url(${image_url})`,
                        backgroundSize: 'cover',
                        backgroundPosition: 'center',
                        color: 'transparent',
                    }}
                >
                    {title}
                </div>
            )}
            {featured && !image_url && (
                <div className="news-placeholder">[ placeholder ] · 1600×800</div>
            )}
            <h3 className="news-title">{title}</h3>
            <p className="news-excerpt">{excerpt}</p>
        </article>
    );
}

export default function News() {
    const ref = useReveal();
    const posts = getBootstrap().posts || [];

    return (
        <section id="news" data-screen-label="04 News">
            <div className="wrap">
                <div className="section-head reveal" ref={ref}>
                    <span className="eyebrow">Хроники сервера</span>
                    <div style={{ height: 20 }} />
                    <h2 className="h-display" style={{ fontSize: 'clamp(36px, 5vw, 60px)' }}>
                        Новости и патчноуты
                    </h2>
                    <div className="divider-ornament">✦</div>
                </div>

                {posts.length === 0 ? (
                    <NewsEmpty />
                ) : (
                    <div className="news-grid">
                        {posts.map((p) => (
                            <NewsCard key={p.id ?? p.title} {...p} />
                        ))}
                    </div>
                )}
            </div>
        </section>
    );
}

function NewsEmpty() {
    const ref = useReveal();
    return (
        <div
            className="news-empty reveal"
            ref={ref}
            style={{
                textAlign: 'center',
                padding: '80px 24px',
                border: '1px dashed var(--panel-border-strong)',
                borderRadius: 'var(--radius)',
                background: 'rgba(127, 184, 212, 0.02)',
            }}
        >
            <div style={{ fontSize: 28, color: 'var(--moon)', marginBottom: 14 }}>✦</div>
            <h3
                className="h-display"
                style={{ fontSize: 24, marginBottom: 10 }}
            >
                Пока новостей нет
            </h3>
            <p className="lead" style={{ fontStyle: 'italic', maxWidth: 520, margin: '0 auto' }}>
                Хроники сервера ещё не открыли первую страницу. Загляни позже — здесь
                появятся патчноуты, события и девблоги.
            </p>
        </div>
    );
}