import React from 'react';
import { Link } from 'react-router-dom';
import './PostCard.css';

const PostCard = ({ post }) => {
    const { title, excerpt, slug, _embedded } = post;

    // Extract featured image if available
    const featuredImage = _embedded?.['wp:featuredmedia']?.[0]?.source_url;
    const authorName = _embedded?.author?.[0]?.name || 'Admin';
    const categoryName = _embedded?.['wp:term']?.[0]?.[0]?.name || 'News';
    const date = new Date(post.date).toLocaleDateString();

    return (
        <div className="post-card">
            <div className="post-card-image-wrapper">
                {featuredImage ? (
                    <img
                        src={featuredImage}
                        alt={title.rendered}
                        className="post-card-image"
                    />
                ) : (
                    <span className="post-card-fallback">📄</span>
                )}
            </div>
            <div className="post-card-content">
                <div className="post-meta">
                    <span className="post-category-badge">{categoryName}</span>
                    <span className="post-meta-divider">•</span>
                    <span>{date}</span>
                </div>
                <h3 className="post-title">
                    <Link to={`/news/${slug}`} dangerouslySetInnerHTML={{ __html: title.rendered }} />
                </h3>
                <div
                    className="post-excerpt"
                    dangerouslySetInnerHTML={{ __html: excerpt.rendered }}
                />
                <Link
                    to={`/news/${slug}`}
                    className="post-read-more"
                >
                    더 읽기 →
                </Link>
            </div>
        </div>
    );
};
export default PostCard;
