import React from 'react';
import { usePosts } from '../hooks/usePosts';
import PostCard from '../components/PostCard';
import './News.css';

const News = () => {
    // Pass the category slug 'news' to filter posts
    const { posts, loading, error } = usePosts(1, 9, 'news');

    if (loading) {
        return (
            <div className="news-loading">
                <div className="loading-spinner"></div>
            </div>
        );
    }

    if (error) {
        return (
            <div className="news-error">
                <div className="news-content-wrapper">
                    <h2 className="error-title">Oops! Something went wrong.</h2>
                    <p className="error-message">Failed to load news. Please try again later.</p>
                    <p style={{ fontSize: '0.875rem', marginTop: '0.5rem', color: '#9ca3af' }}>Error: {error.message}</p>
                </div>
            </div>
        );
    }

    return (
        <div className="news-container">
            <div className="news-content-wrapper">
                <div className="news-header">
                    <h1 className="news-title">소식 (News)</h1>
                    <p className="news-subtitle">
                        Sokuree Consultant의 최신 소식과 인사이트를 전해드립니다.
                    </p>
                </div>

                <div className="news-grid">
                    {posts.map((post) => (
                        <PostCard key={post.id} post={post} />
                    ))}
                </div>

                {posts.length === 0 && (
                    <div className="news-empty">
                        <p style={{ fontSize: '1.25rem', color: '#6b7280' }}>등록된 소식이 없습니다.</p>
                    </div>
                )}
            </div>
        </div>
    );
};

export default News;