"use client";

import { getFullImageUrl } from "@/lib/api/client";
import type { SignatureRendererProps, StampRendererProps } from "./types";

export function SignatureRenderer({ component }: SignatureRendererProps) {
  const labelPos = component.labelPosition || "left";
  const showLabel = component.showLabel !== false;
  const labelText = component.labelText || "서명:";

  return (
    <div className="h-full w-full">
      <div
        className={`flex h-full gap-2 ${
          labelPos === "top"
            ? "flex-col"
            : labelPos === "bottom"
              ? "flex-col-reverse"
              : labelPos === "right"
                ? "flex-row-reverse"
                : "flex-row"
        }`}
      >
        {showLabel && (
          <div
            className="flex items-center justify-center text-xs font-medium"
            style={{
              width: labelPos === "left" || labelPos === "right" ? "auto" : "100%",
              minWidth: labelPos === "left" || labelPos === "right" ? "40px" : "auto",
            }}
          >
            {labelText}
          </div>
        )}
        <div className="relative flex-1">
          {component.imageUrl ? (
            <img
              src={getFullImageUrl(component.imageUrl)}
              alt="서명"
              style={{
                width: "100%",
                height: "100%",
                objectFit: component.objectFit || "contain",
              }}
            />
          ) : (
            <div
              className="flex h-full w-full items-center justify-center border-2 border-dashed bg-gray-50 text-xs text-gray-400"
              style={{ borderColor: component.borderColor || "#cccccc" }}
            >
              서명 이미지
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export function StampRenderer({ component }: StampRendererProps) {
  const showLabel = component.showLabel !== false;
  const labelText = component.labelText || "(인)";
  const personName = component.personName || "";

  return (
    <div className="h-full w-full">
      <div className="flex h-full gap-2">
        {personName && <div className="flex items-center text-xs font-medium">{personName}</div>}
        <div className="relative flex-1">
          {component.imageUrl ? (
            <img
              src={getFullImageUrl(component.imageUrl)}
              alt="도장"
              style={{
                width: "100%",
                height: "100%",
                objectFit: component.objectFit || "contain",
              }}
            />
          ) : (
            <div
              className="flex h-full w-full items-center justify-center border-2 border-dashed bg-gray-50 text-xs text-gray-400"
              style={{
                borderColor: component.borderColor || "#cccccc",
                borderRadius: "50%",
              }}
            >
              도장 이미지
            </div>
          )}
          {showLabel && (
            <div
              className="absolute inset-0 flex items-center justify-center text-xs font-medium"
              style={{ pointerEvents: "none" }}
            >
              {labelText}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}