import React from 'react'

interface PostCardProps {
  title: string
  excerpt: string
  category?: string
  date: string
  onClick?: () => void
}

export const PostCard: React.FC<PostCardProps> = ({
  title,
  excerpt,
  category,
  date,
  onClick,
}) => {
  return (
    <article
      className="border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer bg-white"
      onClick={onClick}
    >
      <div className="flex items-center gap-2 mb-2">
        {category && (
          <span className="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-700 rounded-full">
            {category}
          </span>
        )}
        <span className="text-sm text-gray-500">{date}</span>
      </div>
      <h2 className="text-xl font-semibold text-gray-900 mb-2">{title}</h2>
      <p className="text-gray-600 line-clamp-3">{excerpt}</p>
      <div className="mt-4 text-blue-600 text-sm font-medium flex items-center gap-1">
        阅读更多
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </div>
    </article>
  )
}