import Link from '@/core/components/elements/Link/Link'
import axios from 'axios'
import { useEffect } from 'react'

const FinishCheckout = ({ query }) => {
  useEffect(() => {
    if (query?.order_id) {
      console.log(`${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/finish-checkout?orderName=${query.order_id}`);
      axios.post(
        `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/finish-checkout?orderId=${query.order_id}`
      )
    }
  }, [query])

  return (
    <div className='p-4'>
      <div className='rounded-xl bg-yellow_r-4 text-center border border-yellow_r-7'>
        <div className='px-4 py-6 text-yellow_r-12'>
          <p className='font-semibold mb-2'>Terima Kasih atas Pembelian Anda</p>
          <p className='text-yellow_r-11 mb-4 leading-6'>
            Rincian belanja sudah kami kirimkan ke email anda. Mohon dicek kembali. jika tidak
            menerima email, anda dapat menghubungi kami disini.
          </p>
          <p className='mb-2 font-medium'>{query?.order_id?.replaceAll('-', '/')}</p>
          <p className='text-caption-2 text-yellow_r-11'>No. Transaksi</p>
        </div>
        <Link
          href='/my/transactions'
          className='bg-yellow_r-6 text-yellow_r-12 rounded-b-xl py-4 block'
        >
          Lihat detail pembelian Anda disini
        </Link>
      </div>
    </div>
  )
}

export default FinishCheckout