import React from 'react';
import { getStatus } from '@/lib/order-status-lib';

interface OrderStatusProps {
    orderStatus: string;
    setOrderStatus: React.Dispatch<React.SetStateAction<string>>;
}

const OrderStatusForm: React.FC<OrderStatusProps> = ({ orderStatus, setOrderStatus }) => {
    const orderStatusList = getStatus();

    const handleChangeStatus = (e: React.ChangeEvent<HTMLSelectElement>) => {
        const selectedStatus = e.target.value;
        setOrderStatus(selectedStatus);
    };

    return (
        <div className="panel mb-5">
            <label htmlFor="order_status">Order Status</label>
            <select id="order_status" name="order_status" className="form-select" value={orderStatus} onChange={handleChangeStatus}>
                <option value="">Select Status</option>
                {orderStatusList.map((status) => (
                    <option key={status.key} value={status.key}>
                        {status.label}
                    </option>
                ))}
            </select>
        </div>
    );
};

export default OrderStatusForm;