```jsx
import React from 'react';
import { MapPin, Box, Truck, Info } from 'lucide-react';

// TypeScript interfaces for our data structures
interface Address {
  fullName: string;
  phoneNumber: string;
  street: string;
  city: string;
  state: string;
  country: string;
  zipCode: string;
}

interface OrderItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
  image: string;
  size?: string;
  color?: string;
}

interface ShippingMethod {
  id: string;
  name: string;
  price: number;
  estimatedDeliveryWindow: {
    from: string;
    to: string;
  };
}

interface CheckoutPageProps {
  shippingAddress: Address;
  orderItems: OrderItem[];
  shippingMethods: ShippingMethod[];
  selectedShippingMethod: string;
  onShippingMethodChange: (id: string) => void;
  onEditAddress: () => void;
  onViewOrderDetails: () => void;
}

export default function CheckoutPage({
  shippingAddress,
  orderItems,
  shippingMethods,
  selectedShippingMethod,
  onShippingMethodChange,
  onEditAddress,
  onViewOrderDetails,
}: CheckoutPageProps) {
  // Calculate order summary
  const subtotal = orderItems.reduce((sum, item) => sum + (item.price * item.quantity), 0);
  const selectedShipping = shippingMethods.find(method => method.id === selectedShippingMethod);
  const shippingFee = selectedShipping?.price || 0;
  const salesTax = subtotal * 0.0825; // Example tax rate of 8.25%
  const total = subtotal + shippingFee + salesTax;

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="max-w-6xl mx-auto flex flex-col lg:flex-row gap-6">
        {/* Left Column */}
        <div className="flex-1 space-y-6">
          {/* Shipping Address */}
          <div className="bg-white rounded-lg p-6 shadow-sm">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                <MapPin className="w-5 h-5 text-gray-600" />
                <h2 className="font-semibold text-lg">SHIPPING ADDRESS</h2>
              </div>
              <button 
                onClick={onEditAddress}
                className="text-blue-600 hover:text-blue-700 text-sm font-medium"
              >
                Edit
              </button>
            </div>
            <div className="border-l-4 border-[#FF3B30] pl-4 py-2">
              <p className="font-medium">{shippingAddress.fullName}</p>
              <p className="text-gray-600">{shippingAddress.phoneNumber}</p>
              <p className="text-gray-600">
                {shippingAddress.street}, {shippingAddress.city}, {shippingAddress.state}, {shippingAddress.country}, {shippingAddress.zipCode}
              </p>
            </div>
          </div>

          {/* Order Details */}
          <div className="bg-white rounded-lg p-6 shadow-sm">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                <Box className="w-5 h-5 text-gray-600" />
                <h2 className="font-semibold text-lg">ORDER DETAILS</h2>
              </div>
              <button 
                onClick={onViewOrderDetails}
                className="text-blue-600 hover:text-blue-700 text-sm font-medium"
              >
                View details
              </button>
            </div>
            <div className="space-y-4">
              {orderItems.map((item) => (
                <div key={item.id} className="flex items-start gap-4">
                  <img 
                    src={item.image} 
                    alt={item.name} 
                    className="w-20 h-20 object-cover rounded-md"
                  />
                  <div className="flex-1">
                    <h3 className="font-medium">{item.name}</h3>
                    <p className="text-sm text-gray-600">
                      {item.size && `Size: ${item.size}`}
                      {item.color && ` • Color: ${item.color}`}
                    </p>
                    <div className="flex justify-between mt-2">
                      <p className="text-sm text-gray-600">Quantity: {item.quantity}</p>
                      <p className="font-medium">${(item.price * item.quantity).toFixed(2)}</p>
                    </div>
                  </div>
                </div>
              ))}
              <p className="text-sm text-gray-600">
                Total Items: {orderItems.reduce((sum, item) => sum + item.quantity, 0)}
              </p>
            </div>
          </div>

          {/* Shipping Methods */}
          <div className="bg-white rounded-lg p-6 shadow-sm">
            <div className="flex items-center gap-2 mb-4">
              <Truck className="w-5 h-5 text-gray-600" />
              <h2 className="font-semibold text-lg">SHIPPING METHODS</h2>
            </div>
            <div className="space-y-3">
              {shippingMethods.map((method) => (
                <div key={method.id} className="border rounded-lg p-4">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <input 
                        type="radio" 
                        id={method.id} 
                        name="shipping" 
                        checked={selectedShippingMethod === method.id}
                        onChange={() => onShippingMethodChange(method.id)}
                        className="w-4 h-4 text-blue-600"
                      />
                      <label htmlFor={method.id} className="font-medium">
                        {method.name}
                      </label>
                    </div>
                    <span className="font-medium">${method.price.toFixed(2)}</span>
                  </div>
                  <p className="text-sm text-gray-600 mt-2 ml-7">
                    Estimated Delivery Window: {method.estimatedDeliveryWindow.from} - {method.estimatedDeliveryWindow.to}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Right Column - Order Summary */}
        <div className="lg:w-[400px]">
          <div className="bg-white rounded-lg p-6 shadow-sm">
            <h2 className="font-semibold text-lg mb-6">ORDER SUMMARY</h2>
            
            <div className="space-y-4">
              <div className="flex justify-between">
                <span className="text-gray-600">Subtotal:</span>
                <span className="font-medium">${subtotal.toFixed(2)}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-600">Shipping Fees:</span>
                <span className="font-medium">${shippingFee.toFixed(2)}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-600">On-Time Delivery Guarantee:</span>
                <span className="text-green-600">Free</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-600">Sales Tax:</span>
                <span className="font-medium">${salesTax.toFixed(2)}</span>
              </div>
              <div className="flex justify-between pt-4 border-t">
                <span className="font-semibold">Total:</span>
                <span className="font-semibold text-[#FF3B30] text-xl">
                  ${total.toFixed(2)}
                </span>
              </div>
              
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <span>Reward</span>
                <span className="font-medium">{subtotal.toFixed(2)} DRESSIN Points</span>
                <Info className="w-4 h-4" />
              </div>
            </div>

            <button className="w-full bg-black text-white py-3 rounded-lg mt-6 font-medium hover:bg-gray-800 transition-colors">
              PLACE ORDER
            </button>

            {/* Rest of the order summary section remains the same */}
          </div>
        </div>
      </div>
    </div>
  );
}
```