"use client";

import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Hash } from "lucide-react";
import { useReportDesigner } from "@/contexts/ReportDesignerContext";
import type { ComponentConfig } from "@/types/report";

interface Props {
  component: ComponentConfig;
}

export function PageNumberProperties({ component }: Props) {
  const { updateComponent } = useReportDesigner();

  return (
    <div className="mt-4 space-y-3 rounded-xl border border-purple-200 bg-purple-50/50 p-4">
      <div className="flex items-center gap-2 text-sm font-semibold text-purple-700">
        <Hash className="h-4 w-4" />
        페이지 번호 설정
      </div>
      <div>
        <Label className="text-xs">표시 형식</Label>
        <Select
          value={component.pageNumberFormat || "number"}
          onValueChange={(value) =>
            updateComponent(component.id, {
              pageNumberFormat: value as "number" | "numberTotal" | "koreanNumber",
            })
          }
        >
          <SelectTrigger className="h-9">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="number">숫자만 (1, 2, 3...)</SelectItem>
            <SelectItem value="numberTotal">현재/전체 (1 / 3)</SelectItem>
            <SelectItem value="koreanNumber">한글 (1 페이지)</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}