import React from 'react';
import Link from 'next/link';

const BentoCard = ({ type, badge, title, category, readTime, bgImage, hero = false, style = {}, href }) => {
  const inner = (
    <article
      className={`bento-card${hero ? ' hero-article' : ''}`}
      style={href ? {} : style}
      tabIndex={href ? -1 : 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>
  );

  if (href) return (
    <Link href={href} style={style} className="bento-card-link">
      {inner}
    </Link>
  );
  return inner;
};

export default BentoCard;