PricingCard.tsx

import { PricingCard } from '@/components/pricing/PricingCard';

export default function PricingPage() {
  return (
    <PricingCard
      name="Pro"
      description="Perfect for growing teams"
      unitAmount={2999}
      currency="usd"
      priceType="recurring"
      priceId="price_1234567890"
      couponId={null}
      amountOff={null}
      percentOff={null}
      isCouponValid={false}
      marketingFeatures={[
        { name: 'Unlimited projects' },
        { name: 'Priority support' },
        { name: 'Advanced analytics' },
      ]}
      cta={{ text: 'Get Started' }}
    />
  );
}

<PricingCard
  name="Enterprise"
  description="For large organizations"
  unitAmount={9999}
  currency="usd"
  priceType="recurring"
  priceId="price_0987654321"
  couponId="SAVE20"
  amountOff={null}
  percentOff={20}
  isCouponValid={true}
  marketingFeatures={[
    { name: 'Unlimited everything' },
    { name: 'Dedicated support' },
    { name: 'Custom integrations' },
  ]}
  cta={{ text: 'Contact Sales' }}
/>

import { PricingCard } from '@/components/pricing/PricingCard';

async function getPricingData() {
  const res = await fetch('/api/stripe/products');
  return res.json();
}

export default async function PricingPage() {
  const { products, coupons } = await getPricingData();

  return (
    <div className="grid grid-cols-3 gap-6">
      {products.map((product) => (
        <PricingCard
          key={product.priceId}
          name={product.name}
          description={product.description}
          unitAmount={product.unitAmount}
          currency={product.currency}
          priceType={product.priceType}
          priceId={product.priceId}
          couponId={coupons[0]?.id || null}
          amountOff={coupons[0]?.amountOff || null}
          percentOff={coupons[0]?.percentOff || null}
          isCouponValid={coupons[0]?.valid || false}
          marketingFeatures={product.marketingFeatures}
          cta={{ text: 'Subscribe' }}
        />
      ))}
    </div>
  );
}