import { IssueViewDetailContentSection } from "./issue-view-detail-content-section";
import { IssueViewDetailReportTabs } from "./issue-view-detail-report-tabs";
import { IssueViewDetailSubmittedDetail } from "./issue-view-detail-submitted-detail";
import type { IssueViewDetailBodyProps } from "./issue-view-detail-types";

export function IssueViewDetailBody({
  data,
  isDark,
  labels,
  status,
  translateText,
  reportTabs = [],
}: IssueViewDetailBodyProps) {
  return (
    <>
      <IssueViewDetailSubmittedDetail
        data={data}
        isDark={isDark}
        labels={labels}
        status={status}
        translateText={translateText}
      />

      <IssueViewDetailContentSection
        isDark={isDark}
        marginTop={3.5}
        title={labels.issueDescription}
      >
        {translateText ? translateText(data.description) : data.description}
      </IssueViewDetailContentSection>

      <IssueViewDetailContentSection
        isDark={isDark}
        title={labels.recommendation}
      >
        {translateText
          ? translateText(data.recommendation)
          : data.recommendation}
      </IssueViewDetailContentSection>

      {reportTabs.length > 0 ? (
        <IssueViewDetailReportTabs isDark={isDark} tabs={reportTabs} />
      ) : null}
    </>
  );
}