import React from 'react';

import { Step } from '@/hooks/palmistry/use-steps';
import useSteps from '@/hooks/palmistry/use-steps';
import Paywall from '@/components/palmistry/paywall/paywall';

export default function StepPaywall() {
  const steps = useSteps();
  const storedEmail = steps.getStoredValue(Step.Email);

  const [email, setEmail] = React.useState(steps.getStoredValue(Step.Email));

  React.useEffect(() => {
    if (storedEmail) setEmail(storedEmail);
  }, [storedEmail]);

  const onNext = () => {
    steps.goNext();
  };

  return (
    <>
      <Paywall email={email} onClickActionButton={onNext}/>
    </>
  );
}