// PostCard.jsx
import React from 'react';
import { Button } from '@progress/kendo-react-buttons';
import { Card, CardImage, CardBody } from '@progress/kendo-react-layout';

const PostCard = ({ post, onEdit }) => {
    const dataPath = post.header.image;
    const relativePath = `../../${dataPath}`;
    const imageUrl = new URL(relativePath, import.meta.url).href;

    const formatDate = (utcString) => {
        if (!utcString) return '';
        
        // 1. Create Date object. It parses the UTC string automatically.
        const date = new Date(utcString);
        
        // 2. Define options for the desired output format (local time zone)
        const dateOptions = {
            year: 'numeric',
            month: 'short', // e.g., 'Sep'
            day: 'numeric',
            hour: 'numeric',
            minute: '2-digit',
            hour12: true, // e.g., '9:51 PM'
            timeZoneName: undefined // Removes the timezone name from the output
        };

        // 3. Convert to local, human-readable string and clean up formatting
        // The space between date and time may vary by locale, so we use string replacement for consistency.
        const formattedDate = date.toLocaleDateString(undefined, dateOptions);

        // This attempts to convert the format '9/20/2025, 9:51 PM' to 'Sep 20, 2025, 9:51 PM'
        const parts = formattedDate.split(',');
        if (parts.length > 1) {
            const timePart = date.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit', hour12: true });
            const datePart = date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
            return `${datePart}, ${timePart}`;
        }
        
        return formattedDate;
    };

    return (
        <Card key={post.slug} style={{ width: '250px', textAlign: 'center', display: 'flex' }}>
            
            {/* 1. Thumbnail Image */}
                <CardImage 
                    src={imageUrl} 
                    alt={post.title} 
                    style={{ width: '100%', height: '100px', objectFit: 'cover' }} 
                />

            {/* 2. Title, Date, and Button Container */}
            <CardBody style={{ flexGrow: 1, padding: '10px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                
                {/* Title Link */}
                <div style={{ marginBottom: '5px' }}>
                    <a className="k-link" href={post.canonical_url} target="_blank" rel="noreferrer" style={{ fontWeight: 'bold' }}>
                        {post.title}
                    </a>
                </div>
                
                {/* Date and Edit Button */}
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '0.85em' }}>
                    <span>{formatDate(post.date)}</span>
                    <Button 
                        look="flat" 
                        themeColor="primary" 
                        onClick={() => onEdit(post.slug)}
                    >
                        Edit
                    </Button>
                </div>

            </CardBody>
        </Card>
    );
};

export default PostCard;