import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
import { useState } from 'react'

const Manifest = ({ idAWB, closePopup }) => {
  console.log('ini adalah', idAWB)
  const airway = {
    waybillNumber: '1234',
    deliveryOrder: {
      name: 'name',
      carrier: 'carrier'
    },
    manifests: [
      {
        datetime: '12/12/2023',
        description: 'ini descripsi'
      }
    ]
  }
  return (
    <>
      <BottomPopup
        key={airway.waybillNumber}
        title='Detail Pengiriman'
        active={idAWB}
        close={closePopup}
      >
        <div className='flex flex-col gap-y-4 my-4'>
          <div className='flex justify-between'>
            <div className='text-gray_r-11'>No Pengiriman</div>
            <div>{airway?.deliveryOrder?.name}</div>
          </div>
          <div className='flex justify-between'>
            <div className='text-gray_r-11'>Kurir</div>
            <div>{airway?.deliveryOrder?.carrier}</div>
          </div>
          <div className='flex justify-between'>
            <div className='text-gray_r-11'>No Resi</div>
            <div>{airway?.waybillNumber}</div>
          </div>
        </div>

        <div className='pt-4'>
          <div className='font-semibold text-body-1 mb-4'>Status Pengiriman</div>
          <ol class='relative border-l border-gray_r-7'>
            {airway?.manifests?.map((manifest, index) => (
              <li class='mb-6 ml-4' key={index}>
                <div
                  class={`absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border ${
                    index == 0 ? 'bg-red-600 border-red-600' : 'bg-gray_r-7 border-white'
                  }`}
                />
                <time class='text-sm leading-none text-gray-400'>{manifest.datetime}</time>
                <p
                  class={`leading-6 font-medium text-body-2 mt-2 ${
                    index == 0 ? 'text-red-600' : 'text-gray_r-11'
                  }`}
                >
                  {manifest.description}
                </p>
              </li>
            ))}
            {(!airway?.manifests || airway?.manifests?.length == 0) && (
              <div className='badge-red text-sm'>Belum ada pengiriman</div>
            )}
          </ol>
        </div>
      </BottomPopup>
    </>
  )
}

export default Manifest