import { Form, Input } from "antd";
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import { updatePlateCar } from "features/order/orderSlice";
import { useTranslation } from "react-i18next";
import { useAppDispatch } from "redux/hooks";

export default function CarPlateCard() {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();

  return (
    <>
      <ProInputCard title={t("cart.plateNumber")}>
        <Form.Item name="plateCar">
          <Input
            placeholder={t("cart.plateNumber")}
            size="large"
            autoFocus={false}
            style={{
              padding: "7px 11px",
              height: 48,
              borderRadius: 888,
              fontWeight: 500,
              fontStyle: "Medium",
              fontSize: 12,
              lineHeight: "140%",
              letterSpacing: 0,
            }}
            onChange={(e) => {
              dispatch(updatePlateCar(e.target.value));
            }}
          />
        </Form.Item>
      </ProInputCard>
    </>
  );
}
