Payment Method Selector

"use client";

import { useState } from "react";
import { CreditCard, Smartphone, Store, Mail } from "lucide-react";
import PaymentMethodSelector, { type PaymentMethod } from "@/components/ui/paymentmethodselector";

type MethodId = "card" | "apple_pay" | "in_store" | "email_link";

const METHODS: PaymentMethod[] = [
  {
    id: "card",
    icon: <CreditCard className="h-5 w-5" />,
    label: "Credit or debit card",
    description: "Visa, Mastercard, Amex",
  },
  {
    id: "apple_pay",
    icon: <Smartphone className="h-5 w-5" />,
    label: "Apple Pay / Google Pay",
    description: "One-tap from your device",
    disabled: true,
  },
  {
    id: "in_store",
    icon: <Store className="h-5 w-5" />,
    label: "Reserve & pay in store",
    description: "Hold for 7 days · pay in person",
  },
  {
    id: "email_link",
    icon: <Mail className="h-5 w-5" />,
    label: "Email me a payment link",
    description: "We'll follow up personally",
  },
];

export default function PaymentMethodSelectorDemo() {
  const [method, setMethod] = useState<MethodId>("card");
  return (
    <div className="mx-auto max-w-md">
      <PaymentMethodSelector
        title="Payment"
        methods={METHODS}
        selectedId={method}
        onSelectionChange={(id) => setMethod(id as MethodId)}
      />
    </div>
  );
}