Empty State

---
/**
 * EmptyStateCard — A placeholder component for empty views or failed searches.
 * 
 * @param {string} icon - The emoji or symbol to display. Default is '📁'.
 * @param {string} title - The primary bold headline. Default is 'No results found'.
 * @param {string} message - Supporting descriptive text.
 * @param {string} ctaLabel - Optional button text for an action.
 */
interface Props {
  icon?: string;
  title?: string;
  message?: string;
  ctaLabel?: string;
}

const { 
  icon = "📁", 
  title = "No results found", 
  message = "Try adjusting your filters or adding a new item.",
  ctaLabel
} = Astro.props;
---

<div class="empty-state">
  <div class="empty-state__icon" aria-hidden="true">{icon}</div>
  <h4 class="empty-state__title">{title}</h4>
  <p class="empty-state__message">{message}</p>
  {ctaLabel && <button class="empty-state__btn" type="button">{ctaLabel}</button>}
</div>

<style>
  .empty-state { 
    text-align: center; 
    padding: var(--sp-16, 4rem) var(--sp-8, 2rem); 
    border: 2px dashed var(--c-border, rgba(255,255,255,0.1)); 
    border-radius: var(--r-xl, 24px); 
    color: var(--c-text-2, #94a3b8); 
    background: var(--c-bg-elev, rgba(255,255,255,0.02)); 
    width: 100%;
    box-sizing: border-box;
  }
  
  .empty-state__icon { font-size: 3.5rem; margin-bottom: var(--sp-4, 1rem); opacity: 0.6; filter: grayscale(0.5); }
  
  .empty-state__title { color: var(--c-text-1, #fff); margin: 0; font-size: 1.25rem; font-weight: 700; }
  
  .empty-state__message { font-size: 0.95rem; margin-top: 0.75rem; max-width: 320px; margin-inline: auto; line-height: 1.5; }
  
  .empty-state__btn { 
    margin-top: var(--sp-6, 1.5rem); 
    background: var(--c-primary, #6366f1); 
    color: #fff; border: none; 
    padding: 0.6rem 1.4rem; 
    border-radius: var(--r-md, 8px); 
    font-weight: 700; cursor: pointer; 
    transition: transform 0.2s;
  }
  
  .empty-state__btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
</style>