import { useState } from 'react';
import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";

function App() {
  const [mintAmount, setMintAmount] = useState(1);
  const nftCost = 0.001;
  const projectId = '_YOUR_PROJECT_ID_';
  const collectionId = '_YOUR_COLLECTION_ID_';

  const handleDecrement = () => {
    if (mintAmount <= 1) return;
    setMintAmount(mintAmount - 1);
  }

  const handleIncrement = () => {
    if (mintAmount >= 3) return;
    setMintAmount(mintAmount + 1);
  }

  return (
    <div>
      <button onClick={handleDecrement}> - </button>
      <input
        readOnly
        type="number"
        value={mintAmount}
      />
      <button onClick={handleIncrement}> + </button>

      <CrossmintPayButton
        projectId={projectId}
        collectionId={collectionId}
        environment="staging"
        mintConfig={{
          type: "erc-721",
          totalPrice: (nftCost * mintAmount).toString(),
          _quantity: mintAmount // the `_quantity` property should match what is in your mint function
          // your custom minting arguments...
        }}
      />
    </div>
  );
}

export default App;