---
const { developer } = Astro.props;
---

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden h-full flex flex-col">
  <div class="p-6 bg-gradient-to-br from-blue-100 to-indigo-100 dark:from-blue-900 dark:to-indigo-900">
    <div class="flex items-center">
      {developer.logo ? (
        <img 
          src={developer.logo} 
          alt={developer.name} 
          class="w-16 h-16 rounded-lg bg-white/80 dark:bg-white/10 p-2 object-contain mr-4"
        />
      ) : (
        <div class="w-16 h-16 rounded-lg bg-white/80 dark:bg-white/10 flex items-center justify-center text-3xl mr-4">
          {developer.name.charAt(0)}
        </div>
      )}
      
      <div>
        <h2 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-primary dark:group-hover:text-blue-400 transition-colors">
          {developer.name}
        </h2>
        
        {developer.softwareCount > 0 && (
          <p class="text-sm text-gray-600 dark:text-gray-400">
            {developer.softwareCount} {developer.softwareCount === 1 ? 'Software' : 'Software'}
          </p>
        )}
      </div>
    </div>
    
    {developer.country && (
      <div class="mt-3 flex items-center">
        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
          </svg>
          {developer.country}
        </span>
      </div>
    )}
  </div>
  
  <div class="p-6 flex-grow">
    <p class="text-gray-700 dark:text-gray-300 line-clamp-3">
      {developer.description}
    </p>
  </div>
  
  <div class="bg-gray-50 dark:bg-gray-700 px-6 py-3 border-t border-gray-100 dark:border-gray-600">
    <div class="flex justify-end">
      <span class="text-primary dark:text-blue-400 group-hover:underline">
        Explore →
      </span>
    </div>
  </div>
</div>