import React from 'react';

interface DeliveryOptionsProps {
  pickUpAvailable: boolean;
  inPlaceUseAvailable: boolean;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

const DeliveryOptions: React.FC<DeliveryOptionsProps> = ({
  pickUpAvailable,
  inPlaceUseAvailable,
  onChange
}) => {
  return (
    <div className="card mb-4">
      <div className="card-body">
        <label className="form-label">
          How will renters receive this item?
        </label>
        <div className="form-check">
          <input
            type="checkbox"
            className="form-check-input"
            id="pickUpAvailable"
            name="pickUpAvailable"
            checked={pickUpAvailable}
            onChange={onChange}
          />
          <label className="form-check-label" htmlFor="pickUpAvailable">
            Pick-Up/Drop-off
            <div className="small text-muted">
              You and the renter coordinate pick-up and drop-off
            </div>
          </label>
        </div>
        <div className="form-check">
          <input
            type="checkbox"
            className="form-check-input"
            id="inPlaceUseAvailable"
            name="inPlaceUseAvailable"
            checked={inPlaceUseAvailable}
            onChange={onChange}
          />
          <label
            className="form-check-label"
            htmlFor="inPlaceUseAvailable"
          >
            In-Place Use
            <div className="small text-muted">
              They use at your location
            </div>
          </label>
        </div>
      </div>
    </div>
  );
};

export default DeliveryOptions;