---
import { loadTranslations } from '../../utils/i18n';
import ScreenshotGallery from './ScreenshotGallery.astro';

const { software, locale } = Astro.props;
const t = await loadTranslations(locale);
---

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8 h-[500px] overflow-y-auto">
  <h2 class="text-2xl font-bold mb-4">{t.common.overview || 'Overview'}</h2>
  <p class="text-gray-700 dark:text-gray-300 mb-6">{software.description}</p>
  
  {software.screenshots && software.screenshots.length > 0 && (
    <ScreenshotGallery screenshots={software.screenshots} softwareName={software.name} />
  )}
  
  <h3 class="text-xl font-bold mb-4">{t.software.features || 'Features'}</h3>
  <ul class="list-disc list-inside mb-6">
    {software.features.map(feature => (
      <li class="mb-2 text-gray-700 dark:text-gray-300">{feature}</li>
    ))}
  </ul>
  
  <h3 class="text-xl font-bold mb-4">{t.software.platforms || 'Platforms'}</h3>
  <div class="flex flex-wrap gap-2 mb-6">
    {software.platforms.map(platform => (
      <span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-sm">
        {platform}
      </span>
    ))}
  </div>
  
  <div class="text-sm text-gray-500 dark:text-gray-400">
    {t.software.lastUpdated || 'Last Updated'}: {new Date(software.lastUpdated).toLocaleDateString()}
  </div>
</div>