const Cart = () => {
  const cart = useAppSelector((state) => state.cart);
  const [stripeToken, setStripeToken] = useState("");
  const onToken = (token: string) => {
    setStripeToken(token);
  };
  console.log(stripeToken);
  return (
    <Container>
      <Navbar />
      <PromoInfo />
      <Wrapper>
        <Title>YOUR CART</Title>
        <Top>
          <TopButton>CONTINUE SHOPPING</TopButton>
          <TopTexts>
            <TopText>Shopping Bag(2)</TopText>
            <TopText>Your Wishlist(0)</TopText>
          </TopTexts>
          <TopButton buttonType="filled">CHECKOUT NOW</TopButton>
        </Top>
        <Bottom>
          <Information>
            {cart.products.map((product) => (
              <Product>
                <ProductDetail>
                  <Image src={product.img} />
                  <Details>
                    <ProductName>
                      <b>Product:</b>
                      {product.title}
                    </ProductName>
                    <ProductId>
                      <b>ID:</b>
                      {product._id}
                    </ProductId>
                    {product.color?.map((color, i) => (
                      <ProductColor key={i} color={color} />
                    ))}
                  </Details>
                </ProductDetail>
                <PriceDetail>
                  <ProductAmountContainer>
                    <AddIcon />
                    <ProductAmount>{product.quantity}</ProductAmount>
                    <RemoveIcon />
                  </ProductAmountContainer>
                  <ProductPrice>
                    {product.price * product.quantity}PLN
                  </ProductPrice>
                </PriceDetail>
              </Product>
            ))}
            <Hr />
          </Information>
          <Summary>
            <SummaryTitle>ORDER SUMMARY</SummaryTitle>
            <SummaryItem>
              <SummaryItemText>Subtotal</SummaryItemText>
              <SummaryItemPrice>{cart.total}PLN</SummaryItemPrice>
            </SummaryItem>
            <SummaryItem>
              <SummaryItemText>Estimated Shipping</SummaryItemText>
              <SummaryItemPrice>5.90PLN</SummaryItemPrice>
            </SummaryItem>
            <SummaryItem>
              <SummaryItemText>Shipping Discount</SummaryItemText>
              <SummaryItemPrice>-5.90PLN</SummaryItemPrice>
            </SummaryItem>
            <SummaryItem type="total">
              <SummaryItemText>Total</SummaryItemText>
              <SummaryItemPrice>{cart.total}PLN</SummaryItemPrice>
            </SummaryItem>
            <StripeCheckout
              name="FABICO"
              image="https://avatars.githubusercontent.com/u/1486366?v=4"
              billingAddress
              shippingAddress
              description={`Your total is $${cart.total}`}
              amount={cart.total * 100}
              token={onToken}
              stripeKey={KEY || ""}
            >
              <SummaryButton>CHECKOUT NOW</SummaryButton>
            </StripeCheckout>
          </Summary>
        </Bottom>
      </Wrapper>
      <Footer />
    </Container>
  );
};
TS2769: No overload matches this call.
  Overload 1 of 2, '(props: StripeCheckoutProps | Readonly<StripeCheckoutProps>): StripeCheckout', gave the following error.
    Type '(token: string) => void' is not assignable to type '(token: Token) => void'.
      Types of parameters 'token' and 'token' are incompatible.
        Type 'Token' is not assignable to type 'string'.
  Overload 2 of 2, '(props: StripeCheckoutProps, context: any): StripeCheckout', gave the following error.
    Type '(token: string) => void' is not assignable to type '(token: Token) => void'.
    208 |               description={`Your total is $${cart.total}`}
    209 |               amount={cart.total * 100}
  > 210 |               token={onToken}
        |               ^^^^^
    211 |               stripeKey={KEY || ""}
    212 |             >
    213 |               <SummaryButton>CHECKOUT NOW</SummaryButton>