<script>
  import '../app.css';
  import { goto } from '$app/navigation';
  import WorldMap from '$lib/components/WorldMap.svelte';
  import Button from '$lib/components/Button.svelte';
  import BottomBar from '$lib/components/BottomBar.svelte';
  import NewTripPopup from '$lib/components/NewTripPopup.svelte';
  import Nav from '$lib/components/Nav.svelte';

  let showNewTripPopup = false;
  
  const GOOGLE_PLACES_API_KEY = import.meta.env.VITE_GOOGLE_PLACES_API_KEY;
  
  function handleNewTrip() {
      showNewTripPopup = true;
  }
</script>

<main>
  <Nav activeTab="Planner" />

  <div class="map-container">
      <WorldMap />
  </div>

  <div class="floating-button">
      <Button text="+ Plan a new trip" type="single" onClick={handleNewTrip} />
  </div>
  
  <BottomBar onClick={() => goto('/trips')} />

  <NewTripPopup bind:showPopup={showNewTripPopup} />
</main>

<style>
  main {
      height: 100vh;
      display: flex;
      flex-direction: column;
      background-color: var(--gray-50);
      font-family: 'Inter', sans-serif;
  }

  .map-container {
      flex: 1;
      position: relative;
      background-color: var(--gray-50);
  }

  .floating-button {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      z-index: 10;
}
</style>