import { PaymentDataItem } from '../../../types/services/analytic'
import { formatCurrency } from '../../../utils/transform'

const PaymentMethodReport = ({ payments }: { payments: PaymentDataItem[] }) => {
  const ProgressBar = ({ percentage, color = 'bg-blue-500' }: any) => (
    <div className='w-full bg-gray-200 rounded-full h-2'>
      <div
        className={`${color} h-2 rounded-full transition-all duration-300`}
        style={{ width: `${percentage}%` }}
      ></div>
    </div>
  )

  return (
    <div className='bg-white rounded-lg shadow-md'>
      <div className='p-6'>
        <div className='flex items-center mb-6'>
          <i className='tabler-credit-card text-[24px] text-blue-500 mr-2'></i>
          <h2 className='text-xl font-semibold text-gray-900'>Payment Methods</h2>
        </div>
        <div className='space-y-6'>
          {payments.map(method => (
            <div key={method.payment_method_id} className='border-b border-gray-200 pb-4 last:border-b-0'>
              <div className='flex justify-between items-center mb-2'>
                <span className='text-sm font-medium text-gray-900'>{method.payment_method_name}</span>
                <span className='text-sm text-gray-600'>{method.percentage.toFixed(1)}%</span>
              </div>
              <ProgressBar
                percentage={method.percentage}
                color={method.payment_method_type === 'cash' ? 'bg-green-500' : 'bg-blue-500'}
              />
              <div className='flex justify-between items-center mt-2 text-xs text-gray-600'>
                <span>{formatCurrency(method.total_amount)}</span>
                <span>{method.order_count} orders</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default PaymentMethodReport