import type { VocationalWorkflow } from '@/components/vocational-opportunities/types';
import { StatePanel } from '@/components/ui/state-panel';

interface VocationalLoadingStateProps {
  readonly workflow: VocationalWorkflow;
}

export function VocationalLoadingState({ workflow }: VocationalLoadingStateProps) {
  if (!workflow.isSearching) {
    return null;
  }

  return (
    <StatePanel
      title={`Searching for opportunities near ${workflow.zipCode}...`}
      tone="sky"
      size="lg"
      alignment="center"
      loading
    >
      Finding vocational programs and job placements in your area
    </StatePanel>
  );
}
