import { Input, Select, Form } from "antd";

// 定义设置面板属性类型
export interface InputSettingsProps {
  text?: string;
  size?: 'small' | 'middle' | 'large';
  placeholder?: string; 
  setProp: (callback: (props: any) => void) => void;
}

export const Settings: React.FC<InputSettingsProps> = ({ 
  setProp, 
  text,
  size,
  placeholder
}) => {
  const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setProp((props: any) => props.text = e.target.value);
  };

  const handleSizeChange = (value: string) => {
    setProp((props: any) => props.size = value);
  };

  const handlePlaceholderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setProp((props: any) => props.placeholder = e.target.value);
  };

  return (
    <Form layout="vertical" style={{ padding: 16 }}>
      <Form.Item label="默认文本">
        <Input
          value={text}
          onChange={handleTextChange}
          placeholder="输入默认文本"
        />
      </Form.Item>
      
      <Form.Item label="输入框尺寸">
        <Select 
          value={size}
          onChange={handleSizeChange}
          style={{ width: '100%' }}
        >
          <Select.Option value="small">小号</Select.Option>
          <Select.Option value="middle">中号</Select.Option>
          <Select.Option value="large">大号</Select.Option>
        </Select>
      </Form.Item>

      <Form.Item label="占位文本">
        <Input
          value={placeholder}
          onChange={handlePlaceholderChange}
          placeholder="输入占位文本"
        />
      </Form.Item>
    </Form>
  );
};