import React from "react";
import "../App.css";
import { Button } from "./Button";
import "./HeroSection.css";
import { useAuth } from "../auth/AuthProvider";

export default function HeroSection() {
  const [isLoggedIn] = useAuth();

  return (
    <div className="hero-container">
      <h1>Herzlich Willkommen</h1>
      <div className="hero-btns">
        {isLoggedIn ? (
          <Button
            className="btns"
            buttonStyle="btn--primary"
            buttonSize="btn--large"
            newTo="study"
          >
            Zur Studie
          </Button>
        ) : (
          <>
            <Button
              className="btns"
              buttonStyle="btn--primary"
              buttonSize="btn--large"
              newTo="login"
            >
              Einloggen (wenn du schon einmal mitgemacht hast)
            </Button>
            <Button
              className="btns"
              buttonStyle="btn--primary"
              buttonSize="btn--large"
              newTo="register"
            >
              Registrieren (falls du das erste Mal hier bist)
            </Button>
          </>
        )}
        <Button
          className="btns"
          buttonStyle="btn--primary"
          buttonSize="btn--large"
          newTo="manual"
        >
          Anleitung
        </Button>
      </div>
    </div>
  );
}