---
// CP-DATA-020 entity_grid
import EmptyCollection from './EmptyCollection.astro';

interface Props {
  emptyMessage?: string;
}
const { emptyMessage } = Astro.props;
const hasContent = Astro.slots.has('default');
---
{hasContent ? (
  <div class="entity-grid">
    <slot />
  </div>
) : (
  <EmptyCollection title={emptyMessage ?? 'Nessun elemento'} />
)}

<style>
  .entity-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  @media (min-width: 640px) {
    .entity-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 960px) {
    .entity-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
</style>