
import React from 'react'
import { useTranslation } from 'react-i18next';
import { Col, Row } from 'reactstrap';
import { useGetOneOrder } from '../../../api/order';
import { useParams } from 'react-router-dom';
import { ChangeformatDate } from '../../../utils/Date/ChangeFormat';
import { Spin } from 'antd';


function Form() {
  const [t] = useTranslation()
  const { id } = useParams()
  const { data, isLoading } = useGetOneOrder({ id: id })
  const order = data?.data || {};

  if (isLoading) {
    return <Spin />
  }

  return (
    <>
      <Row xs={1} sm={1} md={2} lg={2} xl={2} className='OrderDetails'>
        <Col  >
          <p >{t("customer_name")}{" : "}{order.user?.name??"null"}</p>
          <p >{t("customer_phone_number")}{" : "}{order.user?.phone??"null"}</p>
          <p >{t("order_created_at")}{" : "}{ChangeformatDate(order.created_at)}</p>
          <p >{t("address")}{" : "}{order?.form?.address}</p>
          <p >{t("country")}{" : "}{order?.form?.country}</p>
          <p >{t("note")}{" : "}{order?.form?.note}</p>
        </Col>
        <Col  >

          <p >{t("sub_total")}{" : "}{order?.total}</p>
          <p >{t("delivery_fee")}{" : "}{0}</p>
          <p >{t("overall_total")}{" : "}{order?.total}</p>

        </Col>


      </Row>


    </>
  )
}

export default Form


