import React from "react";

import { useNavigate } from 'react-router-dom';

import './discount-screen.css';

import routes from '@/routes';
import HeaderLogo from '@/components/palmistry/header-logo/header-logo';

export default function DiscountScreen() {
  const navigate = useNavigate();

  const userHasWeeklySubscription = false;

  const goPremiumBundle = () => {
    navigate(routes.client.palmistryPremiumBundle());
  };

  React.useEffect(() => {
    if (userHasWeeklySubscription) {
      goPremiumBundle();
    }
  }, [userHasWeeklySubscription]);

  return (
    <div className="discount-screen">
      <div className="discount-screen__header">
        <HeaderLogo />
      </div>

      <div className="discount-screen__content">
        <span className="discount-screen__title">
          Not planning on looking back?
        </span>

        <div className="discount-screen__blocks">
          <section className="discount-screen__block">
            <span className="discount-screen__price-block">€19 for <br /> 1-week plan</span>

            <div className="discount-screen__details">
              <span className="discount-screen__details-name">Total savings</span>
              <span className="discount-screen__details-value">€0</span>
            </div>

            <div className="discount-screen__details">
              <span className="discount-screen__details-name">7-day trial</span>
              <span className="discount-screen__details-value">yes</span>
            </div>

            <button className="discount-screen__button" style={{ minHeight: '38px' }} onClick={goPremiumBundle}>
              Start trial
            </button>
          </section>

          <section className="discount-screen__block">
            <div className="discount-screen__header-block">save 33%</div>

            <span className="discount-screen__price-block">€12.73 for <br /> 1-week plan</span>

            <div className="discount-screen__details">
              <span className="discount-screen__details-name">Total savings</span>
              <span className="discount-screen__details-value">€6.27</span>
            </div>

            <div className="discount-screen__details">
              <span className="discount-screen__details-name">3-day trial</span>
              <span className="discount-screen__details-value">no</span>
            </div>

            <button className="discount-screen__button">
              Pay now and <br /> skip trial
            </button>
          </section>
        </div>
      </div>
    </div>
  );
}