---
import type { ShowContent } from "../lib/api";
interface Props { shows: ShowContent[] }
const { shows } = Astro.props;
---

<section class="shows section section-light" id="spettacoli" aria-labelledby="shows-title">
  <div class="container">
    <div class="section-heading horizontal-heading">
      <div><p class="eyebrow">La ricerca incontra il pubblico</p><h2 id="shows-title">Spettacoli e progetti</h2></div>
      <p>Esiti, attraversamenti e storie nate durante il lavoro in sala.</p>
    </div>
    {shows.length ? (
      <div class="show-grid">
        {shows.map((show) => (
          <article class="show-card">
            <div class="show-image"><img src={show.image.url} alt={show.image.alt} width="700" height="880" loading="lazy" /></div>
            <div class="show-copy">
              <p class="show-meta"><span>{show.year}</span>{show.location && <span>{show.location}</span>}</p>
              <h3>{show.title}</h3>
              <p>{show.short_description}</p>
              {show.cast && <p class="muted">{show.cast}</p>}
            </div>
          </article>
        ))}
      </div>
    ) : <p class="empty-state">Nuovi spettacoli e progetti sono in preparazione.</p>}
  </div>
</section>