// src/components/StoryCard.jsx
function StoryCard({ item }) {
  const { navigate, lang, t } = useApp();
  const ts = t.stories;
  const canOpen = Boolean(getStorySlug(item, lang));

  return (
    <div
      className={`card-base card-hover flex flex-col h-full group${canOpen ? ' cursor-pointer' : ''}`}
      style={{ overflow: 'hidden' }}
      onClick={canOpen ? () => navigate('history-article', item) : undefined}
      role={canOpen ? 'link' : undefined}
    >
      {item.img ? (
        <img
          src={item.img}
          alt={item.title[lang]}
          className="story-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="story-img flex items-center justify-center text-center px-3"
          style={{
            background: 'var(--bg-outline)',
            color: 'var(--text-muted)',
            fontSize: 12,
            lineHeight: 1.4,
          }}
        >
          {item.imgPlaceholder?.[lang] || item.imgPlaceholder?.ru}
        </div>
      )}
      <div className="p-4 flex flex-col flex-1">
        <p className="text-[13px] mb-6" style={{ color: 'var(--text-muted)' }}>{item.date[lang]}</p>
        <h3 className="text-[15px] font-semibold mb-2" style={{ color: 'var(--text)' }}>{item.title[lang]}</h3>
        <p className="text-[15px] leading-relaxed flex-1" style={{ color: 'var(--text-muted)' }}>{item.text[lang]}</p>
        <button
          type="button"
          className="story-read-more text-[15px] font-medium mt-4 self-start text-left"
          style={{ color: 'var(--accent)', background: 'none', border: 'none', cursor: canOpen ? 'pointer' : 'default', padding: 0 }}
        >
          {ts.readMore}
          <ArrowRight size={16} className="link-arrow" />
        </button>
      </div>
    </div>
  );
}