---
interface Props {
  title: string;
  description?: string;
  image?: string;
  imageAlt?: string;
  link?: string;
  linkText?: string;
  tags?: string[];
  location?: string;
  className?: string;
}

const { 
  title, 
  description, 
  image, 
  imageAlt = "", 
  link, 
  linkText = "详细信息",
  tags = [],
  location,
  className = "" 
} = Astro.props;
---

<div class={`bg-white dark:bg-color-dark-card rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow ${className}`}>
  {image && (
    <div class="h-56 overflow-hidden relative">
      <div class="w-full h-full bg-gray-300 dark:bg-gray-700 flex items-center justify-center">
        <span class="text-gray-500 dark:text-gray-400">{imageAlt || title}</span>
      </div>
      {location && (
        <div class="absolute top-3 left-3 bg-white dark:bg-color-dark-bg px-2 py-1 rounded text-sm font-medium text-gray-700 dark:text-gray-300">
          {location}
        </div>
      )}
    </div>
  )}
  
  <div class="p-6">
    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">{title}</h3>
    
    {description && (
      <p class="text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">{description}</p>
    )}
    
    {tags.length > 0 && (
      <div class="flex flex-wrap gap-2 mb-4">
        {tags.map(tag => (
          <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full dark:bg-color-dark-surface dark:text-gray-400">
            {tag}
          </span>
        ))}
      </div>
    )}
    
    <slot />
    
    {link && (
      <a 
        href={link}
        class="inline-block mt-2 text-color-primary-600 hover:text-color-primary-700 dark:text-color-primary-400 dark:hover:text-color-primary-300 font-medium"
      >
        {linkText} &rarr;
      </a>
    )}
  </div>
</div> 