import React from 'react';
import './SecureCheckout.css';

function SecureCheckout() {
  return (
    <section className="secure-checkout">
      <div className="container">
        <div className="checkout-cards">
          <CheckoutCard
            icon = "https://pplx-res.cloudinary.com/image/upload/v1742750792/user_uploads/lvXnWfmGJeACxbS/info.jpg"
            title="Protect Your Information"
            description="Enjoy a seamless and secure checkout experience with our state-of-the-art payment processing system. Your personal and financial information is safeguarded."
            buttonText="Complete Order"
            bgColor="#67816B"
            buttonColor = "#E29864"
          />
          <CheckoutCard
            icon = "https://pplx-res.cloudinary.com/image/upload/v1742750923/user_uploads/wAlZdsRaDPZTVGw/return.jpg"
            title="Hassle-Free Returns"
            description="If you're not completely satisfied with your purchase, we offer a hassle-free returns policy. Contact our customer service team, and we'll work with you."
            buttonText="Start Return"
            bgColor = "#FF9800"
            buttonColor = "#67816B"
          />
        </div>
      </div>
    </section>
  );
}

function CheckoutCard({ icon, title, description, buttonText, buttonColor, bgColor }) {
  const cardStyle = {
    backgroundColor: bgColor,
  };

  return (
    <div className="checkout-card" style={cardStyle}>
      <div className="icon-container">
        <img src={icon} alt="Icon" />
      </div>
      <h3>{title}</h3>
      <p>{description}</p>
      <button style={{ backgroundColor: buttonColor }}>{buttonText}</button>
    </div>
  );
}
export default SecureCheckout;