import type { ReactNode } from "react"
import type { ExpertKey, ExpertVisualKey } from "./ExpertsView"

interface ExpertPanelLeadProps {
  activeExpertKey: ExpertKey
  activeExpertName: string
  activeExpertVisualKey: ExpertVisualKey
  expertWorkspaceLogo: ReactNode
  renderExpertIcon: (expertKey: ExpertVisualKey) => ReactNode
}

export function ExpertPanelLead({
  activeExpertKey,
  activeExpertName,
  activeExpertVisualKey,
  expertWorkspaceLogo,
  renderExpertIcon
}: ExpertPanelLeadProps) {
  return expertWorkspaceLogo ? (
    <div className={"expert-hero-heading expert-brand-card expert-brand-card-" + activeExpertKey}>
      {expertWorkspaceLogo}
      <span className="expert-hero-body">
        <strong className="expert-hero-title">{activeExpertName}</strong>
      </span>
    </div>
  ) : (
    <div className="conversation-panel-kicker expert-hero-kicker">
      <span className={"expert-hero-icon expert-hero-icon-" + activeExpertVisualKey} aria-hidden="true">
        {renderExpertIcon(activeExpertVisualKey)}
      </span>
      <span className="expert-hero-copy">
        <strong>{activeExpertName}</strong>
      </span>
    </div>
  )
}
