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, orderType } = useAppSelector(selectCart);

  return (
    orderType !== "gift" && (
      <>
        <ProInputCard title={t("checkout.phoneNumber")}>
          <Form.Item
            name="phone"
            required
            rules={[
              { required: true, message: t("checkout.pleaseEnterPhoneNumber") },
            ]}
          >
            <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>
      </>
    )
  );
}
