// Wizard.ts

import WizardContext, { useContextValue, useSetContextValue } from "./Wizard";

const Tab = ({ children, id }) => {
  const setStep = useSetContextValue("step");
  return <button onClick={() => setStep(id)}>{children}</button>;
};

const Tabs = () => {
  const method = useContextValue("paymentMethod");
  const step = useContextValue("step");
  
  return (
    <div>
      <Tab id={1} completed={step > 1}>Payment details</Tab>
      <Tab id={2} completed={step > 2}>
        {method === "card" ? "Card details" : "PayPal authorization"}
      </Tab>
      <Tab id={3} completed={step > 3}>Confirmation</Tab>
    </div>
  )
};

const Panels = () => {
  const method = useContextValue("paymentMethod");
  const step = useContextValue("step");  
  if (step === 1) { /* … */ }
  if (step === 2 && method === "card") { /* … */ }
  if (step === 2 && method === "paypal") { /* … */ }
  if (step === 3) { /* … */ }
}

const Wizard = () => {
  return (
    <WizardContext initialValues={{ paymentMethod: "paypal" }}>
      <Tabs />
      <Panels />
    </WizardContext>
  );
}