CedarCopilot/cedar-mail

import type React from 'react';
import type { SetupStepId, SetupStepProps } from '../types';
import { ConnectStepBody, ConnectStepPreview } from './ConnectStep';
import { InboxDisplayStepBody, InboxDisplayStepPreview } from './InboxDisplayStep';
import { SubInboxStepBody, SubInboxStepPreview } from './SubInboxStep';
import { LiveInboxStepBody, LiveInboxStepPreview } from './LiveInboxStep';
import { TasksStepBody, TasksStepPreview } from './TasksStep';
import { PipelineStepBody, PipelineStepPreview } from './PipelineStep';

interface StepView {
  Body: React.ComponentType<SetupStepProps>;
  Preview: React.ComponentType;
}

const CONNECT_VIEW: StepView = { Body: ConnectStepBody, Preview: ConnectStepPreview };

/** Step id → its two panes. The shell owns the layout; steps own their content. */
export const STEP_VIEWS: Record<SetupStepId, StepView> = {
  // Every connect step renders the same component; it switches on `step.connect`.
  'connect-meeting': CONNECT_VIEW,
  'connect-crm': CONNECT_VIEW,
  'connect-slack': CONNECT_VIEW,
  'connect-mcp': CONNECT_VIEW,
  'connect-linkedin': CONNECT_VIEW,
  'connect-whatsapp': CONNECT_VIEW,
  'connect-drive': CONNECT_VIEW,
  'inbox-display': { Body: InboxDisplayStepBody, Preview: InboxDisplayStepPreview },
  'inbox-splits': { Body: SubInboxStepBody, Preview: SubInboxStepPreview },
  'inbox-live': { Body: LiveInboxStepBody, Preview: LiveInboxStepPreview },
  tasks: { Body: TasksStepBody, Preview: TasksStepPreview },
  pipeline: { Body: PipelineStepBody, Preview: PipelineStepPreview },
};