// components/ArticleCard.jsx
const ArticleCard = ({ article, setRoute, size = 'md' }) => {
  const cat = CATEGORIES.find(c => c.id === article.cat);
  return (
    <article
      className="chunky lift"
      onClick={() => setRoute({ page: 'article', id: article.id })}
      style={{ cursor: 'pointer', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
    >
      {/* Thumbnail */}
      <div style={{
        position: 'relative',
        aspectRatio: '16 / 10',
        background: cat.bg,
        borderBottom: '2.5px solid var(--line)',
        backgroundImage: `repeating-linear-gradient(45deg, rgba(26,26,46,.05) 0 8px, transparent 8px 16px)`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{ fontSize: 56, opacity: .7 }}>{cat.emoji}</div>
        {article.hot && (
          <span className="tag tag-yellow" style={{ position: 'absolute', top: 10, right: 10, fontSize: 10 }}>
            <Icon name="fire" size={12} /> {article.tag}
          </span>
        )}
        {!article.hot && (
          <span className="tag" style={{ position: 'absolute', top: 10, right: 10, background: '#fff', fontSize: 10 }}>
            {article.tag}
          </span>
        )}
      </div>
      <div style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span className="tag" style={{ background: cat.color, color: cat.id === 'site' ? 'var(--ink)' : '#fff', fontSize: 11 }}>
            {cat.label}
          </span>
          <span style={{ fontSize: 11, fontFamily: 'IBM Plex Mono, monospace', opacity: .6 }}>
            {article.date}
          </span>
        </div>
        <h3 style={{
          margin: 0, fontSize: size === 'lg' ? 20 : 16,
          fontWeight: 900, lineHeight: 1.4, textWrap: 'pretty',
        }}>{article.title}</h3>
        <p style={{ margin: 0, fontSize: 13, lineHeight: 1.6, color: 'var(--ink)', opacity: .75, flex: 1 }}>
          {article.desc}
        </p>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, fontWeight: 700, opacity: .7, paddingTop: 4 }}>
          <Icon name="clock" size={12} /> {article.read}分で読める
        </div>
      </div>
    </article>
  );
};

Object.assign(window, { ArticleCard });