Pricing toggle

'use client';

import * as React from 'react';
import { PricingToggle } from './pricing-toggle';

const PLANS = {
  monthly: { amount: 24, note: 'Billed monthly' },
  yearly: { amount: 19, note: '$228 billed yearly' },
} as const;

type Period = keyof typeof PLANS;

export default function PricingToggleDemo({ replay = 0 }: { replay?: number }) {
  const [period, setPeriod] = React.useState<Period>('monthly');

  React.useEffect(() => {
    if (replay === 0) return;
    setPeriod('monthly');
    const timers = [
      window.setTimeout(() => setPeriod('yearly'), 300),
      window.setTimeout(() => setPeriod('monthly'), 1600),
    ];
    return () => {
      for (const timer of timers) window.clearTimeout(timer);
    };
  }, [replay]);

  return (
    <div className="w-full max-w-xs rounded-2xl border border-secondary bg-primary p-6 shadow-xs">
      <PricingToggle
        data-testid="pricing"
        value={period}
        onValueChange={(value) => setPeriod(value as Period)}
        amount={PLANS[period].amount}
        note={PLANS[period].note}
        locales="en-US"
      />
    </div>
  );
}