import type { VocationalWorkflow } from '@/components/vocational-opportunities/types';
import { VocationalHeader } from '@/components/vocational-opportunities/VocationalHeader';
import { VocationalLoadingState } from '@/components/vocational-opportunities/VocationalLoadingState';
import { VocationalPreSearchState } from '@/components/vocational-opportunities/VocationalPreSearchState';
import { VocationalResults } from '@/components/vocational-opportunities/VocationalResults';
import { VocationalZipSearch } from '@/components/vocational-opportunities/VocationalZipSearch';
import { StatePanel } from '@/components/ui/state-panel';

interface VocationalOpportunitiesViewProps {
  readonly workflow: VocationalWorkflow;
}

export function VocationalOpportunitiesView({ workflow }: VocationalOpportunitiesViewProps) {
  return (
    <div className="space-y-6">
      <VocationalHeader />
      {workflow.isLoading && (
        <StatePanel tone="sky" loading>
          Loading vocational opportunities...
        </StatePanel>
      )}
      {workflow.error && (
        <StatePanel tone="red" role="alert">
          Vocational opportunities could not be loaded from the backend.
        </StatePanel>
      )}
      {!workflow.isLoading && !workflow.error && (
        <>
          <VocationalZipSearch workflow={workflow} />
          <VocationalLoadingState workflow={workflow} />
          <VocationalResults workflow={workflow} />
          {!workflow.hasSearched && !workflow.isSearching && <VocationalPreSearchState workflow={workflow} />}
        </>
      )}
    </div>
  );
}
