import { useState } from "react";
import toast from "react-hot-toast";

const InformationSection = ({ manifests}) => {
  const [copied, setCopied] = useState(false);

  const handleCopyClick = () => {
    const textToCopy = manifests?.waybillNumber;
    navigator.clipboard.writeText(textToCopy);
    setCopied(true);
    toast.success('No Resi Berhasil di Copy');
    setTimeout(() => setCopied(false), 2000); // Reset copied state after 2 seconds
  };

  return (
    <div className=''>
      <div className='grid gap-y-4 p-4'>
        <div className='grid grid-cols-[150px_auto] mb-4'>
          <span className='font-semibold '>Nomor Resi</span>
          <div className='flex gap-x-3'>
            <span className='font-semibold'>: {manifests?.waybillNumber} </span>
            <button
              className={`${copied ? 'text-gray-400' : 'text-red-600 '}`}
              onClick={() => handleCopyClick()}
            >
              <svg
                aria-hidden='true'
                fill='none'
                stroke='currentColor'
                stroke-width='1.5'
                viewBox='0 0 24 24'
                className='w-5 h-6'
              >
                <path
                  d='M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75'
                  stroke-linecap='round'
                  stroke-linejoin='round'
                ></path>
              </svg>
            </button>
          </div>
        </div>
        <div className='grid grid-cols-[150px_auto]'>
          <span>Kurir</span>
          <span className='font-semibold'>
            {' '}
            : {manifests?.deliveryOrder?.carrier}
          </span>
        </div>
        <div className='grid grid-cols-[150px_auto]'>
          <span>Jenis Service</span>
          <span className='font-semibold'>
            {' '}
            : {manifests?.deliveryOrder?.service}
          </span>
        </div>
        <div className='grid grid-cols-[150px_auto]'>
          <span>Tanggal Dikirim</span>
          <span className='font-semibold'> : {manifests?.deliveredDate}</span>
        </div>
        <div className='grid grid-cols-[150px_auto]'>
          <span>Estimasi Tiba</span>
          <span className='font-semibold'>
            :{' '}
            <span className='text-red-600 font-semibold'>{manifests?.eta}</span>
          </span>
        </div>
      </div>
    </div>
  );
};

export default InformationSection;