import React from 'react';

export default function DepositRecordCard({ item }) {
  return (
    <div className="rounded-2xl bg-white p-4 shadow-sm">
      <h3 className="text-2xl font-semibold text-gray-900">{item.method}</h3>
      <p className="mb-3 text-base text-gray-600">{item.created_at}</p>

      <div className="rounded-2xl bg-gray-100 p-4 text-lg leading-9 text-gray-700">
        <p>Deposit reff#: {item.reference}</p>
        <p>Postscript: {item.postscript || '-'}</p>
        <p>Received time: {item.received_time || '-'}</p>
        <p>Handling fee: {item.handling_fee || '-'}</p>
        <p>Promotions: {item.promotion || '-'}</p>
        <p>Remarks: {item.remarks || '-'}</p>
      </div>

      <div className="mt-4 grid grid-cols-3 gap-3 text-center">
        <div>
          <p className="text-sm text-gray-500">Request</p>
          <p className="text-xl font-semibold text-red-500">{item.request_amount}</p>
        </div>
        <div>
          <p className="text-sm text-gray-500">Received amount</p>
          <p className="text-xl font-semibold text-gray-900">{item.received_amount || '-'}</p>
        </div>
        <div>
          <p className="text-sm text-gray-500">Status</p>
          <p className="text-xl font-semibold text-gray-900">{item.status}</p>
        </div>
      </div>
    </div>
  );
}