import React from "react";
import { Link, useNavigate } from "react-router-dom";
import "./Landing.css";

const LandingPage: React.FC = () => {
    const navigate = useNavigate();

    const handleSubscribeClick = () => {
        navigate("/login");
    };

    const handleGoToFlightsClick = () => {
        navigate("/flights");
    };

    return (
        <div className="LandingPageContainer">
            <h1 className="Title">Welcome to FIDS!</h1>
            <p className="Description">
                If you want to subscribe to flights, please create or log in to your account.
            </p>
            <div className="ButtonContainer">
                <Link to="/login" className="StyledLink">
                    <button className="StyledButton" onClick={handleSubscribeClick}>Create an Account</button>
                </Link>
            </div>
            <p className="Description">
                Otherwise, you can continue to the flights page.
            </p>
            <div className="ButtonContainer">
                <button className="StyledButton" onClick={handleGoToFlightsClick}>
                    Go to Flights
                </button>
            </div>
        </div>
    );
};

export default LandingPage;