// 组件设置
import { Input } from "antd";
import type { ButtonProps, ButtonSettingsProps } from "./type";
export const Settings: React.FC<ButtonSettingsProps> = ({ 
  setProp,
  ...props
}) => {
  const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setProp((props:ButtonProps) => props.text = e.target.value);
  };

  const handleSizeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setProp((props:ButtonProps) => props.size = e.target.value as 'small' | 'middle' | 'large');
  };

  return (
    <div style={{ padding: 16 }}>
      <Input
        value={props.text}
        onChange={handleTextChange}
        placeholder="按钮文字"
      />
      
      <div style={{ marginTop: 12 }}>
        <select 
          value={props.size}
          onChange={handleSizeChange}
          style={{ width: '100%', padding: '4px' }}
        >
          <option value="small">小号</option>
          <option value="middle">中号</option>
          <option value="large">大号</option>
        </select>
      </div>
    </div>
  );
};