import React from 'react';
import { NewsArticle } from '../types';

interface NewsCardProps {
  article: NewsArticle;
  onSummarize: (article: NewsArticle) => void;
}

const NewsCard: React.FC<NewsCardProps> = ({ article, onSummarize }) => {
  return (
    <div className="group bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col">
      <div className="relative aspect-video overflow-hidden">
        <img
          src={article.imageUrl}
          alt={article.title}
          className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
          loading="lazy"
        />
        <div className="absolute top-3 left-3">
          <span className="px-2.5 py-1 bg-white/90 backdrop-blur shadow-sm rounded-lg text-xs font-bold text-indigo-600 uppercase tracking-wider">
            {article.source}
          </span>
        </div>
      </div>
      
      <div className="p-5 flex flex-col flex-1">
        <div className="flex items-center text-xs text-slate-400 mb-3">
          <i className="fa-regular fa-calendar-days mr-2"></i>
          {new Date(article.publishedAt).toLocaleDateString('en-US', { 
            month: 'short', 
            day: 'numeric', 
            year: 'numeric' 
          })}
        </div>
        
        <h3 className="text-lg font-bold text-slate-900 line-clamp-2 mb-2 group-hover:text-indigo-600 transition-colors">
          {article.title}
        </h3>
        
        <p className="text-sm text-slate-600 line-clamp-3 mb-6 flex-1">
          {article.description}
        </p>
        
        <div className="flex items-center justify-between gap-3 mt-auto pt-4 border-t border-slate-50">
          <a
            href={article.url}
            target="_blank"
            rel="noopener noreferrer"
            className="flex-1 text-center py-2 px-4 rounded-xl border border-slate-200 text-sm font-semibold text-slate-700 hover:bg-slate-50 transition-all"
          >
            Read Source
          </a>
          <button
            onClick={() => onSummarize(article)}
            className="flex-1 bg-indigo-600 text-white py-2 px-4 rounded-xl text-sm font-semibold shadow-lg shadow-indigo-100 hover:bg-indigo-700 hover:shadow-indigo-200 transition-all flex items-center justify-center gap-2"
          >
            <i className="fa-solid fa-sparkles text-xs"></i>
            AI Summary
          </button>
        </div>
      </div>
    </div>
  );
};

export default NewsCard;