import { getTranslations } from 'next-intl/server';
import { notFound } from 'next/navigation';

import { getCreatorDataCached } from '@/services/creatorsCache';

import CreatorTextPdfButton from '@/components/creators/CreatorTextPdfButton';

import { CreatorData } from '@/types/Creator';

import { CreatorSubPageId } from '@/config/creator-pages/creatorPagesConfig';

type GenericTextSectionProps = {
  creatorId: string;
  pickContent: (creator: CreatorData) => string | undefined | null;
  pickHeader?: (creator: CreatorData) => string | undefined | null;
  showPdfButton?: boolean;
  sectionKey?: CreatorSubPageId;
};

export default async function GenericTextSection({
  creatorId,
  pickContent,
  pickHeader,
  showPdfButton = false,
  sectionKey,
}: GenericTextSectionProps) {
  const creator = await getCreatorDataCached(creatorId);
  if (!creator) notFound();
  const tGrid = await getTranslations('creatorPage.grid');

  const content = pickContent(creator)?.trim();
  if (!content) {
    return null;
  }
  const header = pickHeader?.(creator)?.trim();

  // const plainText = content.replace(/<[^>]*>/g, " ");
  // const words = plainText.split(/\s+/).filter(Boolean).length;
  // const readingMinutes = Math.max(1, Math.round(words / 180));

  return (
    <div className="relative bg-white border border-mma-blue/10 shadow-sm rounded-none">
      <div className="flex flex-col gap-4 p-4 md:p-6">
        {showPdfButton && (
          <CreatorTextPdfButton
            creatorName={creator.nev || ''}
            sectionTitle={sectionKey ? tGrid(sectionKey) : ''}
            sectionSubtitle={header || undefined}
            content={content}
          />
        )}
        {/* <div className="flex flex-wrap items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-mma-blue/70">
          <span className="bg-mma-blue/10 px-3 py-1 text-mma-blue">
            Szöveges tartalom
          </span>
          <span className="border border-mma-yellow/40 bg-mma-yellow/10 px-3 py-1 text-mma-blue/70">
            ~{readingMinutes} perc olvasás
          </span>
        </div> */}

        {header && <div className="text-base font-semibold">{header}</div>}
        <div className="prose max-w-none text-[15px] leading-relaxed text-mma-blue/90 md:text-base [p:first-letter]:float-left [p:first-letter]:mr-2 [p:first-letter]:text-3xl [p:first-letter]:font-semibold [p:first-letter]:text-mma-blue">
          <div className="pb-4" dangerouslySetInnerHTML={{ __html: content }} />
        </div>
      </div>
    </div>
  );
}