"use client";

import type { PageNumberRendererProps } from "./types";

export function PageNumberRenderer({ component, currentPageId, layoutConfig }: PageNumberRendererProps) {
  const format = component.pageNumberFormat || "number";
  const sortedPages = [...layoutConfig.pages].sort((a, b) => a.page_order - b.page_order);
  const currentPageIndex = sortedPages.findIndex((p) => p.page_id === currentPageId);
  const totalPages = sortedPages.length;
  const currentPageNum = currentPageIndex + 1;

  let pageNumberText = "";
  switch (format) {
    case "number":
      pageNumberText = `${currentPageNum}`;
      break;
    case "numberTotal":
      pageNumberText = `${currentPageNum} / ${totalPages}`;
      break;
    case "koreanNumber":
      pageNumberText = `${currentPageNum} 페이지`;
      break;
    default:
      pageNumberText = `${currentPageNum}`;
  }

  return (
    <div
      className="flex h-full w-full items-center justify-center"
      style={{
        fontSize: `${component.fontSize}px`,
        color: component.fontColor,
        fontWeight: component.fontWeight,
        textAlign: component.textAlign as "left" | "center" | "right",
      }}
    >
      {pageNumberText}
    </div>
  );
}