import React from "react";

interface PromptInputProps {
  value: string;
  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
  onExecute?: () => void;
  disabled?: boolean;
  maxLength?: number;
}

/**
 * 에디트 화면 하단 고정 프롬프트 입력창 컴포넌트
 * - 이미지 참고: 입력창, Execute 버튼, 안내문구, 글자수 카운트, 하단 고정
 */
const PromptInput: React.FC<PromptInputProps> = ({
  value,
  onChange,
  onExecute,
  disabled = true,
  maxLength = 500,
}) => {
  return (
    <div className="w-[60%] mx-auto bg-white  z-10 flex flex-col items-center py-4 px-2">
      <div className="w-full max-w-3xl flex items-end gap-2">
        <textarea
          className="flex-1 resize-none rounded-lg border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-400 disabled:bg-gray-100 disabled:cursor-not-allowed min-h-[48px] max-h-32 shadow-sm"
          placeholder="질문을 입력하세요.
예시) A1부터 A10까지 합계를 구해서 B1에 입력하는 수식을 입력해줘"
          value={value}
          onChange={onChange}
          disabled={false}
          maxLength={maxLength}
          rows={5}
        />
        <div style={{ width: "1rem" }} />
        <button
          className="ml-2 px-6 py-2 rounded-lg text-white font-semibold text-base shadow transition disabled:opacity-60 disabled:cursor-not-allowed"
          style={{
            background: "linear-gradient(90deg, #a18fff 0%, #6f6fff 100%)",
          }}
          onClick={onExecute}
          disabled={disabled || !value.trim()}
        >
          전송하기
        </button>
      </div>
      <div className="w-full max-w-3xl flex justify-between items-center mt-1 px-1">
        <span className="text-xs text-gray-500">
          Press Enter to send, Shift+Enter for new line
        </span>
        <span className="text-xs text-gray-400">
          {value.length}/{maxLength}
        </span>
      </div>
    </div>
  );
};

export default PromptInput;
