// src/components/NewsCard.jsx
function NewsCard({ item }) {
  const { navigate, lang } = useApp();
  return (
    <div
      className="card-base card-hover cursor-pointer group"
      onClick={() => navigate('article', item)}
      style={{ overflow: 'hidden' }}
    >
      <img
        src={item.img}
        alt={typeof item.title === 'object' ? item.title[lang] : item.title}
        className="news-img"
        style={{ opacity: 1, transition: 'opacity 0.2s' }}
        onMouseEnter={e => e.target.style.opacity = '0.85'}
        onMouseLeave={e => e.target.style.opacity = '1'}
        loading="lazy"
      />
      <div className="p-4">
        <div className="flex items-center gap-2 mb-4 flex-wrap">
          <Tag type={item.tag} />
          <span className="text-[12px]" style={{ color: 'var(--text-muted)' }}>
            {typeof item.date === 'object' ? item.date[lang] : item.date}
          </span>
        </div>
        <h3 className="text-[15px] font-semibold  mb-2" style={{ color: 'var(--text)' }}>
          {typeof item.title === 'object' ? item.title[lang] : item.title}
        </h3>
        <p className="text-[15px] leading-relaxed" style={{ color: 'var(--text-muted)' }}>
          {typeof item.excerpt === 'object' ? item.excerpt[lang] : item.excerpt}
        </p>
      </div>
    </div>
  );
}