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