interface ShippingMethod {
    provider: string;
    service: string;
    price: number;
    tracking_code: string;
}
interface ShippingMethodProps {
    shippingMethod: ShippingMethod;
    setShippingMethod: React.Dispatch<React.SetStateAction<ShippingMethod>>;
    order_status: string;
}

const ShippingMethodForm: React.FC<ShippingMethodProps> = ({ shippingMethod, setShippingMethod, order_status }) => {
    const handleShippingMethod = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
        setShippingMethod((prev) => ({
            ...prev,
            [name]: name === 'price' ? Number(value) : value,
        }));
    };

    return (
        <div className="m-2 rounded-md border border-white-light py-4 dark:border-[#1b2e4b]">
            <div className="ms-4  ">
                <label htmlFor="shipping_method" className="mb-0 font-bold uppercase ltr:mr-2 rtl:ml-2">
                    Shipping Method
                </label>
                <div className="mt-2 flex items-center">
                    <div className="mr-4">
                        <label htmlFor="provider">provider</label>
                        <input
                            id="provider"
                            type="text"
                            name="provider"
                            disabled={order_status !== 'Processing'}
                            className="form-input flex-1"
                            placeholder="Enter Courier"
                            value={shippingMethod.provider}
                            onChange={handleShippingMethod}
                        />
                    </div>
                    <div className="mr-4">
                        <label htmlFor="service">service</label>

                        <input
                            id="service"
                            type="text"
                            name="service"
                            disabled={order_status !== 'Processing'}
                            className="form-input flex-1"
                            placeholder="Enter Service"
                            value={shippingMethod.service}
                            onChange={handleShippingMethod}
                        />
                    </div>
                    <div className="mr-4">
                        <label htmlFor="price">price</label>

                        <input
                            id="price"
                            type="number"
                            name="price"
                            disabled={order_status !== 'Processing'}
                            className="form-input flex-1"
                            placeholder="Enter Price"
                            value={shippingMethod.price}
                            onChange={handleShippingMethod}
                        />
                    </div>
                </div>
            </div>
        </div>
    );
};
export default ShippingMethodForm;