import moment from 'moment-timezone'

interface Props {
  code: string
  date: string
  status: string
  student: string
  studentCode: string
  concept: string
  total: string
}

export default function PaymentDetails({
  code,
  date,
  status,
  student,
  studentCode,
  concept,
  total,
}: Props) {
  return (
    <div className="p-6 rounded-lg shadow-lg border border-gray-200 divide-y-2">
      <h4 className="text-xl font-bold mb-4">Detalles de Pago</h4>
      <div className="space-y-4 py-4">
        <div className="flex justify-between items-start flex-wrap">
          <span className="font-semibold">Código de pago:</span>
          <span>{code}</span>
        </div>
        <div className="flex justify-between items-start flex-wrap">
          <span className="font-semibold">Fecha de pago:</span>
          <span>{date && moment(date).format('DD/MM/YYYY hh:mm A')}</span>
        </div>
        <div className="flex justify-between items-start flex-wrap">
          <span className="font-semibold">Estado:</span>
          <span>{status}</span>
        </div>
        <div className="flex justify-between items-start flex-wrap">
          <span className="font-semibold">Código del Estudiante:</span>
          <span>{studentCode}</span>
        </div>
        <div className="flex justify-between items-start flex-wrap">
          <span className="font-semibold">Estudiante:</span>
          <span>{student}</span>
        </div>
        <div className="flex justify-between items-start">
          <span className="font-semibold">Concepto de Pago:</span>
          <span>{concept}</span>
        </div>
      </div>
      <div className="flex justify-between items-start flex-wrap pt-4">
        <span className="font-semibold">Monto Total:</span>
        <span className="font-bold">{total}</span>
      </div>
    </div>
  )
}