import React from "react";

interface NewsProps {
  title: string;
  summary: string;
  date: string;
  imageUrl: string;
  category: string;
}

function News({ title, summary, date, imageUrl, category }: NewsProps) {
  return (
    <div className="max-w-sm overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm font-sans">
      {/* Image Header */}
      <div className="relative h-56 w-full">
        <img
          src={imageUrl}
          alt={title}
          className="h-full w-full object-cover"
        />
      </div>

      {/* Content Body */}
      <div className="p-6">
        <div className="flex items-center gap-3 mb-4">
          <span className="rounded-full bg-gray-800 px-4 py-1 text-xs font-semibold text-white">
            {category}
          </span>
          <div className="flex items-center text-gray-500 text-sm">
            {/* Simple SVG Calendar Icon */}
            <svg
              className="w-4 h-4 mr-1"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
              />
            </svg>
            {date}
          </div>
        </div>

        <h2 className="mb-3 text-xl font-bold leading-tight text-gray-900">
          {title}
        </h2>

        <p className="text-sm leading-relaxed text-gray-600">{summary}</p>
      </div>
    </div>
  );
}

export default News;