import type { TTenderDetails } from "@/lib/api/types/Tenders";
import { HEADER_SCROLL_MARGIN, TENDER_SECTION_IDS } from "../constants";
import {
  isNonEmptyTrimmed,
  shouldShowTranslationSection,
} from "../tender-display-utils";
import { SectionHeading } from "./section-heading";

type TenderTranslationSectionProps = {
  tender: TTenderDetails;
};

export function TenderTranslationSection({
  tender,
}: TenderTranslationSectionProps) {
  if (!shouldShowTranslationSection(tender)) return null;

  const showNoticeLang = isNonEmptyTrimmed(tender.notice_language_code);
  const showResolved = isNonEmptyTrimmed(tender.language);

  return (
    <div id={TENDER_SECTION_IDS.translation} className={HEADER_SCROLL_MARGIN}>
      <SectionHeading>Translation</SectionHeading>
      <div className="grid gap-4 sm:grid-cols-2">
        {showNoticeLang ? (
          <div className="rounded-2xl border border-stroke/60 bg-gray-2/40 p-6 shadow-inner dark:border-dark-3 dark:bg-dark-3/30">
            <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-dark-5 dark:text-dark-6">
              Notice language
            </p>
            <p className="text-sm text-dark dark:text-white">
              {tender.notice_language_code}
            </p>
          </div>
        ) : null}
        {showResolved ? (
          <div className="rounded-2xl border border-stroke/60 bg-gray-2/40 p-6 shadow-inner dark:border-dark-3 dark:bg-dark-3/30">
            <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-dark-5 dark:text-dark-6">
              Resolved language
            </p>
            <p className="text-sm text-dark dark:text-white">{tender.language}</p>
          </div>
        ) : null}
      </div>
    </div>
  );
}
