import React from 'react'
import { NewDateTimeFormatter } from '../../../lib/NewDateTimeFormatter'
// import {KTIcon} from '../../../helpers'
// import {Dropdown1} from '../../content/dropdown/Dropdown1'
import { DashDataProps, RecentBVNProps } from '../../../../app/pages/dashboard/model'
import RecentBVNList from '../../../layout/components/paginatedListing/RecentBVNList'

type Props = {
  className: string
  dashData?: DashDataProps
}

const ListsWidget3: React.FC<Props> = ({dashData, className}) => {
  return (
    <div className={`card ${className}`}>
      {/* begin::Header */}
      <div className='card-header border-0'>
        <h3 className='card-title fw-bold text-gray-900'>BVN Verification</h3>
        {/* begin::Menu */}
        {/* <div className='card-toolbar'>
          <button
            type='button'
            className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
            data-kt-menu-trigger='click'
            data-kt-menu-placement='bottom-end'
            data-kt-menu-flip='top-end'
          >
            <KTIcon iconName='category' className='fs-2' />
          </button>
          <Dropdown1 />
        </div> */}
        {/* end::Menu */}
      </div>
      {/* end::Header */}
      {/* begin::Body */}
      <div className='card-body pt-0'>
        {dashData?.loading ?
        null
        :
        dashData?.data?.recent_bvn && dashData?.data?.recent_bvn.length ?
        <RecentBVNList
        data = {dashData?.data?.recent_bvn}
        itemsPerPage={7}
        >
          {(data:RecentBVNProps) => (
            <>
              {data?.map(item => (  
                <div key={item?.uid} className='d-flex align-items-center mb-8'>
                  {/* begin::Bullet */}
                  <span className='bullet bullet-vertical h-40px bg-primary me-5'></span>
                  {/* end::Bullet */}
                  {/* begin::Checkbox */}
                  {/* <div className='form-check form-check-custom form-check-solid mx-5'>
                    <input className='form-check-input' type='checkbox' value='' />
                  </div> */}
                  {/* end::Checkbox */}
                  {/* begin::Description */}
                  <div className='flex-grow-1'>
                    <span className='text-gray-800 fw-bold fs-6'>
                      {item?.bvn}
                    </span>
                    <span className='text-muted fw-semibold d-block'>{NewDateTimeFormatter(item?.added)}</span>
                  </div>
                  <div className='flex-grow-1'>
                    <span className='text-gray-800 fw-bold fs-6'>
                      Pin
                    </span>
                    <span className='text-muted fw-semibold d-block'>{item?.pin || 'dummy'}</span>
                  </div>
                  {/* end::Description */}
                  <span className='badge badge-light-primary fs-8 fw-bold'>status: {item?.status}</span>
                </div>
              ))}
            </>
          )}
        </RecentBVNList>
        :
        <p>No list Found!</p>
        }
      </div>
      {/* end::Body */}
    </div>
  )
}

export {ListsWidget3}