import Link from "@/core/components/elements/Link/Link"
import useTransaction from "@/lib/transaction/hooks/useTransaction"

const FinishCheckout = ({ id }) => {
  const { transaction } = useTransaction({ id })

  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'>{transaction.data?.name}</p>
            <p className='text-caption-2 text-yellow_r-11'>No. Transaksi</p>
          </div>
          <Link
            href={transaction.data?.id ? `/my/transaction/${transaction.data.id}` : '/'}
            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