"use client";

import React from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";

interface ManualConfigPanelProps {
  config?: {
    value?: string;
    placeholder?: string;
  };
  onChange: (config: { value?: string; placeholder?: string }) => void;
  isPreview?: boolean;
}

export const ManualConfigPanel: React.FC<ManualConfigPanelProps> = ({
  config = {},
  onChange,
  isPreview = false,
}) => {
  return (
    <div className="space-y-3 sm:space-y-4">
      <div className="rounded-lg border border-dashed border-muted-foreground/50 bg-muted/30 p-3">
        <p className="text-xs text-muted-foreground">
          사용자가 폼에서 직접 입력합니다
        </p>
      </div>
      <div>
        <Label className="text-xs font-medium sm:text-sm">플레이스홀더 (선택사항)</Label>
        <Input
          value={config.placeholder || ""}
          onChange={(e) => onChange({ ...config, placeholder: e.target.value })}
          placeholder="예: 부서코드 입력"
          disabled={isPreview}
          className="h-8 text-xs sm:h-10 sm:text-sm"
        />
        <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
          사용자에게 표시될 안내 문구입니다
        </p>
      </div>
    </div>
  );
};