import { SponsorTiers } from "@/components/elements/polar/sponsor-tiers";

const tiers = [
  {
    name: "Supporter",
    price: 10,
    description: "Help keep the project alive",
    perks: ["Early access", "Discord access"],
  },
  {
    name: "Sponsor",
    price: 50,
    description: "Help shape the roadmap",
    perks: ["Feature voting", "Priority support", "Logo in README"],
    popular: true,
  },
];

export function Tiers() {
  const [selected, setSelected] = useState(null);

  return (
    <SponsorTiers
      tiers={tiers}
      selectedTier={selected}
      onTierSelect={setSelected}
      onSponsor={(tier) => {
        // Handle checkout
      }}
    />
  );
}

npm install @polar-sh/nextjs

POLAR_ACCESS_TOKEN=polar_at_...

// app/elements/polar/api/checkout/route.ts
import { polar } from "@polar-sh/nextjs";

const client = new polar.Polar({
  accessToken: process.env.POLAR_ACCESS_TOKEN || "", 
  server: "sandbox",
});

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const products = searchParams.get("products")?.split(",") || [];

  const checkout = await client.checkouts.custom.create({
    productPriceIds: products,
    successUrl: `${request.url.split("/api")[0]}/success`,
  });

  return Response.redirect(checkout.url);
}

// app/elements/polar/success/page.tsx
export default function SuccessPage() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="text-center">
        <h1 className="text-3xl font-bold">Thank you!</h1>
        <p className="text-muted-foreground">Your sponsorship is processing</p>
      </div>
    </div>
  );
}

const PRODUCT_IDS = {
  "Tier Name": "prod_xxxxx",
};

interface SponsorTier {
  name: string;
  price: number;
  description: string;
  perks: string[];
  popular?: boolean;
  isHighlight?: boolean;
  isOneTime?: boolean;
}