import React from 'react';

const BentoCard = ({ type, badge, title, category, readTime, bgImage, hero = false, style = {} }) => {
  return (
    <article
      className={`bento-card${hero ? ' hero-article' : ''}`}
      style={style}
      tabIndex={0}
      aria-label={`${category}: ${title}`}
    >
      <div
        className="bento-bg"
        style={{ backgroundImage: `url(${bgImage})` }}
        role="img"
        aria-label={title}
      />
      <div className="bento-overlay" aria-hidden="true" />

      {badge && (
        <div className={`bento-badge badge-${type}`} aria-label={`Etykieta: ${badge}`}>
          {badge}
        </div>
      )}

      <div className="bento-content">
        <h2 className="article-title">{title}</h2>
        <div className="article-meta">
          <span>{category}</span>
          <span className="dot" aria-hidden="true" />
          <span>{readTime}</span>
        </div>
      </div>
    </article>
  );
};

export default BentoCard;
