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

const ResourceListItem = ({ post }) => {
    const { title, date, slug, _embedded } = post;
    const authorName = _embedded?.author?.[0]?.name || 'Admin';
    const postDate = new Date(date).toLocaleDateString();

    return (
        <div className="resource-list-item">
            <div className="resource-item-date">{postDate}</div>
            <div className="resource-item-content">
                <Link to={`/resources/${slug}`} className="resource-item-title" dangerouslySetInnerHTML={{ __html: title.rendered }} />
            </div>
            <div className="resource-item-meta">
                <span className="resource-item-author">{authorName}</span>
                <Link to={`/resources/${slug}`} className="resource-item-link">
                    상세보기
                </Link>
            </div>
        </div>
    );
};

export default ResourceListItem;
