---
// This component is used by the command palette for rendering search results
import Icon from './Icon.astro';

export interface Props {
  results: Array<{
    id: string;
    title: string;
    description?: string;
    url: string;
    type: 'post' | 'page' | 'external';
  }>;
}

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

{results.length > 0 ? (
  <div class="divide-y divide-primary-200 dark:divide-primary-700">
    <div class="p-2">
      <div class="px-3 py-2 text-xs font-medium text-primary-500 dark:text-primary-400 uppercase tracking-wide">
        Results ({results.length})
      </div>
      {results.map((result, index) => (
        <a 
          href={result.url}
          data-index={index}
          class="command-palette-item w-full flex items-start space-x-3 px-3 py-3 hover:bg-primary-50 dark:hover:bg-primary-800 rounded-lg transition-colors group"
        >
          <Icon 
            name={result.type === 'post' ? 'file-text' : result.type === 'page' ? 'file' : 'external-link'} 
            class="w-4 h-4 text-primary-500 dark:text-primary-400 group-hover:text-highlight-500 mt-0.5"
          />
          <div class="flex-1 min-w-0">
            <div class="text-primary-900 dark:text-primary-50 font-medium">
              {result.title}
            </div>
            {result.description && (
              <div class="text-sm text-primary-600 dark:text-primary-300 mt-1 truncate">
                {result.description}
              </div>
            )}
          </div>
          {result.type === 'external' && (
            <Icon name="external-link" class="w-3 h-3 text-primary-400 dark:text-primary-500 mt-1" />
          )}
        </a>
      ))}
    </div>
  </div>
) : (
  <div class="p-8 text-center">
    <Icon name="search-x" class="w-8 h-8 text-primary-400 dark:text-primary-500 mx-auto mb-2" />
    <p class="text-primary-600 dark:text-primary-300">No results found</p>
    <p class="text-sm text-primary-500 dark:text-primary-400 mt-1">Try a different search term</p>
  </div>
)}