import React from 'react';
import { SingleCoupon } from './PaymentCouponHTMLPreview';

export function PaymentCouponPreview({ 
  clientName, 
  clientAddress, 
  owner, 
  formData 
}) {
  const mockOwner = owner || {
    first_name: "OWNER",
    last_name: "NAME",
    mailing_address: "123 MAIN ST\nCITY, ST 12345",
    property_address: "PROPERTY ADDRESS",
    account_number: "000000"
  };

  const mockFormData = formData || {
    paymentNumber: "001",
    dueDate: new Date().toISOString().split('T')[0],
    amount: "0.00",
    lateFeeDate: new Date().toISOString().split('T')[0]
  };

  return (
    <div className="w-full overflow-hidden border border-border shadow-sm bg-background">
      <div style={{ transform: 'scale(0.9)', transformOrigin: 'top left', width: '110%' }}>
        <SingleCoupon 
          clientName={clientName || "ASSOCIATION NAME"}
          associationAddress={clientAddress} 
          owner={mockOwner}
          coupon={mockFormData}
          index={0}
          totalCoupons={1}
        />
      </div>
    </div>
  );
}
