---
interface Props {
  title?: string;
  message?: string;
  icon?: string;
  actionLabel?: string;
  actionHref?: string;
}

const { 
  title = "Keine Einträge gefunden",
  message = "Es gibt noch keine Inhalte in dieser Kategorie.",
  icon = "📝",
  actionLabel,
  actionHref
} = Astro.props;
---

<div class="empty-state flex flex-col items-center justify-center py-16 px-4">
  <div class="icon-wrapper mb-6 text-6xl opacity-50">
    {icon}
  </div>
  
  <h3 class="text-2xl font-semibold text-text-primary mb-3">
    {title}
  </h3>
  
  <p class="text-text-secondary text-center max-w-md mb-8">
    {message}
  </p>
  
  {actionLabel && actionHref && (
    <a 
      href={actionHref}
      class="inline-flex items-center px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 font-medium"
    >
      {actionLabel}
    </a>
  )}
</div>

<style>
  .empty-state {
    min-height: 400px;
  }
  
  .icon-wrapper {
    filter: grayscale(0.5);
  }
  
  @media (prefers-color-scheme: dark) {
    .icon-wrapper {
      filter: grayscale(0.7);
      opacity: 0.3;
    }
  }
</style>