type NewsCardProps = {
  category: string;
  date: string;
  title: string;
  excerpt: string;
  image?: string;
  icon?: string;
};

export default function NewsCard({ category, date, title, excerpt, image, icon }: NewsCardProps) {
  return (
    <article className="bg-white rounded-xl border border-ui-border overflow-hidden shadow-soft hover:shadow-hover hover:border-brand-blue/50 transition-all group flex flex-col">
      {/* Thumbnail */}
      <div className="h-48 overflow-hidden relative">
        {image ? (
          <img
            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
            src={image}
            alt={title}
          />
        ) : (
          <div className="w-full h-full bg-brand-light flex items-center justify-center">
            <i className={`${icon} text-4xl text-brand-blue/40`}></i>
          </div>
        )}
        <div className="absolute top-4 left-4">
          <span className="px-3 py-1 bg-white/90 backdrop-blur-sm text-brand-blue rounded-md text-xs font-bold shadow-sm">
            {category}
          </span>
        </div>
      </div>

      {/* Content */}
      <div className="p-6 flex flex-col flex-1">
        <div className="text-xs text-ui-muted mb-3 flex items-center gap-2">
          <i className="far fa-calendar"></i> {date}
        </div>
        <div className="blog-card-title text-ui-text group-hover:text-brand-blue transition-colors mb-3 leading-tight font-bold">
          {title}
        </div>
        <p className="text-sm text-ui-muted mb-6 flex-1 line-clamp-3">{excerpt}</p>
        <a href="#" className="text-sm font-bold text-brand-blue flex items-center gap-1 group-hover:gap-2 transition-all pt-4">
          Read more <i className="fas fa-arrow-right text-xs"></i>
        </a>
      </div>
    </article>
  );
}