"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: any) => void;
  isPreview?: boolean;
}

export const ManualConfigPanel: React.FC<ManualConfigPanelProps> = ({
  config = {},
  onChange,
  isPreview = false,
}) => {
  return (
    <div className="space-y-3 sm:space-y-4">
      <div>
        <Label className="text-xs font-medium sm:text-sm">입력값</Label>
        <Input
          value={config.value || ""}
          onChange={(e) => onChange({ ...config, value: e.target.value })}
          placeholder={config.placeholder || "값을 입력하세요"}
          disabled={isPreview}
          className="h-8 text-xs sm:h-10 sm:text-sm"
        />
        <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
          코드 생성 시 이 값이 그대로 사용됩니다
        </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"
        />
      </div>
    </div>
  );
};