import React from 'react';
import { Calendar, User } from 'lucide-react';

function NewsCard({ title, date, category, image, excerpt }) {
  return (
    <article className="news-card">
      <div className="p-6">
        <div className="flex items-start gap-4">
          <div className="flex-shrink-0">
            <img 
              src={image} 
              alt={title}
              className="w-32 h-24 object-cover rounded"
            />
          </div>
          <div className="flex-1">
            <h3 className="text-xl font-bold text-gray-900 mb-2 hover:text-primary-600 cursor-pointer">
              {title}
            </h3>
            <div className="flex items-center gap-4 text-sm text-gray-500 mb-3">
              <div className="flex items-center gap-1">
                <Calendar className="w-4 h-4" />
                <span>{date}</span>
              </div>
              <div className="flex items-center gap-1">
                <User className="w-4 h-4" />
                <span>{category}</span>
              </div>
            </div>
            <p className="text-gray-700 leading-relaxed mb-4">
              {excerpt}
            </p>
            <button className="btn-primary text-sm">
              ЧИТАТИ ДАЛІ
            </button>
          </div>
        </div>
      </div>
    </article>
  );
}

export default NewsCard;