import Section from '@/components/Section';
import trackAnalyticsEvent from '@/lib/trackAnalyticsEvent';
import { court } from '@/styles/colors';
import styled from '@emotion/styled';
import { Dispatch, SetStateAction } from 'react';
import { MainButton, MobileCTAButton } from './Buttons';
import Footer from './Footer';
import { AuthModalState } from './auth/AuthModal';

const DesktopButton = styled(MainButton)`
  width: 250px;
  height: 50px;
  margin: 30px 0;

  @media screen and (max-width: 600px) {
    display: none;
  }
`;

const AuxPageBottom = ({ setAuthModalOpen }: { setAuthModalOpen?: Dispatch<SetStateAction<AuthModalState>> }) => {
  return (
    <>
      {setAuthModalOpen && (
        <Section>
          <div>
            <h1 style={{ textAlign: 'center', marginBottom: 20, marginTop: 24 }}>Ready to try WavTool?</h1>
            <DesktopButton
              bgColor={court}
              color={'white'}
              style={{ margin: '0 auto 50px auto', width: '100%', maxWidth: 200 }}
              onClick={() => {
                setAuthModalOpen('register');
                trackAnalyticsEvent({
                  name: 'Landing Button Clicked',
                  properties: {
                    text: 'Sign up',
                    location: 'Contact',
                  },
                });
              }}
            >
              Sign up
            </DesktopButton>
            <MobileCTAButton
              data-nosnippet
              bgColor={court}
              color={'white'}
              style={{ margin: '0 auto 50px auto', width: '100%', maxWidth: 200 }}
              onClick={() => {
                setAuthModalOpen('register');
                trackAnalyticsEvent({
                  name: 'Landing Button Clicked',
                  properties: {
                    text: 'Sign up',
                    location: 'Contact',
                  },
                });
              }}
            >
              Sign up
            </MobileCTAButton>
          </div>
        </Section>
      )}
      <Footer />
    </>
  );
};

export default AuxPageBottom;