import Layout from './Layout.jsx'

export default function Blog({ articles }) {
  return (
    <Layout>
      <section className="bn-hero">
        <h1>Blog</h1>
        <p>Histórias, cortes e sabores da Buenas Carnes &amp; Pasta</p>
      </section>
      <div className="bn-wrap">
        <div className="bn-grid">
          {articles.map((a) => (
            <a key={a.slug} className="bn-card" href={`/${a.slug}/`}>
              <div className="bn-card-img" style={{ backgroundImage: a.image ? `url("${a.image}")` : undefined }}>
                <div className="bn-card-img-overlay" />
              </div>
              <div className="bn-card-body">
                {a.date && <span className="bn-card-date">{a.date}</span>}
                <h3 className="bn-card-title">{a.title}</h3>
                {a.excerpt && <p className="bn-card-excerpt">{a.excerpt}</p>}
                <span className="bn-card-link">
                  Ler artigo
                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none">
                    <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </Layout>
  )
}
