---
import Heading from '../typography/Heading.astro';
import Text from '../typography/Text.astro';

export interface Props {
  title: string;
  description: string;
  icon: string;
  status: 'available' | 'beta' | 'coming-soon';
  href: string;
  class?: string;
}

const { title, description, icon, status, href, class: className = '' } = Astro.props;

const statusConfig = {
  'available': {
    text: 'Verfügbar',
    bgClass: 'bg-green-100 dark:bg-green-900/30',
    textClass: 'text-green-700 dark:text-green-400'
  },
  'beta': {
    text: 'Beta',
    bgClass: 'bg-yellow-100 dark:bg-yellow-900/30',
    textClass: 'text-yellow-700 dark:text-yellow-400'
  },
  'coming-soon': {
    text: 'Demnächst',
    bgClass: 'bg-gray-100 dark:bg-gray-800',
    textClass: 'text-gray-600 dark:text-gray-400'
  }
};

const currentStatus = statusConfig[status] || statusConfig['coming-soon'];
---

<a
  href={href}
  class={`group relative block h-full ${className}`}
>
  <div class="relative h-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-6 transition-all duration-300 hover:bg-gradient-to-br hover:from-mana-blue/5 hover:to-blue-500/5 dark:hover:from-mana-blue/10 dark:hover:to-blue-500/10 hover:border-mana-blue/30 hover:shadow-xl hover:shadow-mana-blue/10 hover:-translate-y-1">
    <!-- Flex Container: Icon left, Content right -->
    <div class="flex gap-4 items-start">
      <!-- Icon Left -->
      <div class="flex-shrink-0">
        <div class="w-16 h-16 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform group-hover:from-mana-blue/10 group-hover:to-blue-500/10 dark:group-hover:from-mana-blue/20 dark:group-hover:to-blue-500/20">
          {icon.startsWith('/') ? (
            <img src={icon} alt={title} class="w-12 h-12 object-contain" />
          ) : (
            <span class="text-4xl select-none">{icon}</span>
          )}
        </div>
      </div>

      <!-- Content Right -->
      <div class="flex-1 min-w-0">
        <!-- Title and Status -->
        <div class="flex items-start justify-between gap-2 mb-2">
          <Heading as="h3" size="h6" class="group-hover:text-mana-blue transition-colors">
            {title}
          </Heading>
          <div class={`${currentStatus.bgClass} ${currentStatus.textClass} px-2 py-1 rounded-full text-xs font-medium whitespace-nowrap flex-shrink-0`}>
            {currentStatus.text}
          </div>
        </div>

        <!-- Description -->
        <Text size="sm" color="muted" class="line-clamp-2 mb-3">
          {description}
        </Text>

        <!-- CTA Link -->
        <span class="inline-flex items-center gap-1 text-xs font-medium text-mana-blue opacity-0 group-hover:opacity-100 transition-opacity">
          Mehr erfahren
          <svg class="w-3 h-3 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
        </span>
      </div>
    </div>
  </div>
</a>