"use client";

type FreeShippingSavingsSectionProps = {
  signup_bonus_amount: number;
};

export default function FreeShippingSavingsSection({
  signup_bonus_amount,
}: FreeShippingSavingsSectionProps) {
  return (
    <section className="savings-band text-center">
      <div className="container py-5">
        <h2 className="fw-bold section-title">
          Start earning more on every purchase with cash back at over 10,000
          stores.
        </h2>
        <p className="savings-subline mb-4">
          Enjoy these unbeatable member benefits with a 3-day trial for just $3,
          then only $19/month.
        </p>
        <div className="row g-4 align-items-center justify-content-center">
          <div className="col-12 col-md-4">
            <div className="stat-num">$0.00</div>
            <div className="stat-label">Shipping on eligible orders</div>
          </div>
          <div className="col-12 col-md-4">
            <div className="stat-num">10,000+</div>
            <div className="stat-label">Stores with cash back</div>
          </div>
          <div className="col-12 col-md-4">
            <div className="stat-num">${signup_bonus_amount}</div>
            <div className="stat-label">Sign-up bonus to start</div>
          </div>
        </div>
      </div>
    </section>
  );
}