---
// CP-DATA-025 empty_collection
interface Props {
  title?: string;
  description?: string;
}
const { title = 'Nessun elemento', description } = Astro.props;
---
<div class="empty-collection" role="status">
  <p class="empty-collection__title">{title}</p>
  {description && <p class="empty-collection__desc">{description}</p>}
</div>

<style>
  .empty-collection {
    padding: 2rem;
    text-align: center;
    border: 1px dashed var(--color-border, #e5e0d8);
    border-radius: var(--radius, 8px);
    color: var(--color-text-muted, #5a5a5a);
  }
  .empty-collection__title {
    margin: 0;
    font-weight: 600;
  }
  .empty-collection__desc {
    margin: 0.5rem 0 0;
  }
</style>