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

export default function PhoneCard() {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { phone } = useAppSelector(selectCart);
  return (
    <>
      <ProInputCard title={t("checkout.phoneNumber")}>
        <Form.Item name="phone" required rules={[{ required: true }]}>
          <Input
            placeholder={t("checkout.phoneNumber")}
            size="large"
            autoFocus={false}
            style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
            value={phone}
            onChange={(e) => dispatch(updatePhone(e.target.value))}
          />
        </Form.Item>
      </ProInputCard>
    </>
  );
}