import type { VocationalWorkflow } from '@/components/vocational-opportunities/types';
import { VocationalEmptyResults } from '@/components/vocational-opportunities/VocationalEmptyResults';
import { VocationalOpportunityCard } from '@/components/vocational-opportunities/VocationalOpportunityCard';
import { VocationalResultsHeader } from '@/components/vocational-opportunities/VocationalResultsHeader';
import { VocationalStatsGrid } from '@/components/vocational-opportunities/VocationalStatsGrid';

interface VocationalResultsProps {
  readonly workflow: VocationalWorkflow;
}

export function VocationalResults({ workflow }: VocationalResultsProps) {
  if (!workflow.hasSearched || workflow.isSearching) {
    return null;
  }

  return (
    <>
      <VocationalResultsHeader workflow={workflow} />
      <VocationalStatsGrid workflow={workflow} />
      <div className="space-y-4">
        {workflow.displayResults.map((opportunity) => (
          <VocationalOpportunityCard
            key={opportunity.id}
            opportunity={opportunity}
            expanded={workflow.expandedOpportunityId === opportunity.id}
            saved={workflow.savedOpportunityIds.has(opportunity.id)}
            onToggleExpanded={() => workflow.toggleExpandedOpportunity(opportunity.id)}
            onToggleSaved={() => workflow.toggleSavedOpportunity(opportunity.id)}
          />
        ))}

        {workflow.displayResults.length === 0 && <VocationalEmptyResults />}
      </div>
    </>
  );
}
