import Link from 'next/link';
import Image from '~/components/ui/image';
import whatsappUrl from '@/core/utils/whatsappUrl';
import { useEffect, useState } from 'react';
import odooApi from '@/core/api/odooApi';

const FinishCheckout = ({ query }) => {
  const [data, setData] = useState();

  useEffect(() => {
    const fetchData = async () => {
      const so_order = query?.order_id?.replaceAll('_', '/');
      const data = await odooApi(
        'GET',
        `/api/v1/sale_order_number?sale_number=${so_order}`
      );
      setData(data[0]);
    };
    fetchData();
  }, [query]);
  return (
    <div className='flex flex-col items-center'>
      <Image
        src='/images/CHECKOUT-PESANAN.svg'
        alt='Checkout Pesanan'
        width={450}
        height={450}
      />
      <div className='text-title-sm md:text-title-lg text-center font-semibold'>
        Terima Kasih atas Pembelian Kamu
      </div>
      <div className='flex flex-col justify-center items-center text-body-2 md:text-body-1 text-center mt-3 px-24 md:px-36 py-4 border-2 gap-y-2 rounded'>
        <p className='font-bold'>No. Transaksi</p>
        <p className='mb-2 font-medium text-red-500 text-xl'>
          {query?.order_id?.replaceAll('_', '/')}
        </p>
        <Link
          href={`/my/quotations/${data?.id}`}
          className='btn-solid-red rounded-md text-base'
        >
          Cek Detail Transaksi
        </Link>
      </div>
      <div className='mt-2 text-center leading-6 text-base p-4 md:p-0 md:max-w-[700px]'>
        Rincian pembelian sudah kami kirimkan ke email kamu. Mohon dicek
        kembali. jika tidak menerima email, kamu dapat menghubungi kami{' '}
        <a className='text-red-500' href={whatsappUrl()}>
          di sini
        </a>{' '}
        atau kirim rincian pesanan ulang.
      </div>
    </div>
  );
};

export default FinishCheckout;