import { Form, Input } from "antd";
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import { updateOrder } from "features/order/orderSlice";
import { useAppDispatch } from "redux/hooks";

interface InputCardProps {
  title: string;
  name: string;
  placeholder: string;
  value: string;
  required?: boolean;
  reuireqMessage?: string;
}

export default function InputCard({
  title,
  name,
  placeholder,
  value,
  required = false,
  reuireqMessage = "",
}: InputCardProps) {
  const dispatch = useAppDispatch();
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    dispatch(updateOrder({ [name]: e.target.value }));
  };
  return (
    <>
      <ProInputCard title={title} dividerStyle={{ margin: "5px 0 0 0" }}>
        <Form.Item
          name={name}
          rules={[{ required, message: reuireqMessage }]}
        >
          <Input
            placeholder={placeholder}
            size="large"
            autoFocus={false}
            style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
            value={value}
            onChange={handleChange}
          />
        </Form.Item>
      </ProInputCard>
    </>
  );
}