<script lang="ts">

// Fucking having a header that can change size, i don't really want the larger one

  import { createEventDispatcher } from 'svelte';

  let dispatch = createEventDispatcher();

  let types: string[] = ['home', 'regular', 'none'];
  // let currentType: string = 'regular';
  export let currentType = 'regular';
  // apparently Regular is the only one i use...

  let handleClickHome = () => {
    dispatch('clickedHome');
  };

  let handleClickLogout = () => {
    dispatch('clickedLogout');
  };

</script>

<!-- Make it so you can have a Big Home page header and a regular header or no header -->
<!-- So far my CSS is super Gross, i guess i'll get Hugo to help me with it -->

<header class={currentType}>
  <!-- svelte-ignore a11y-click-events-have-key-events -->
  <img class={currentType} src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={handleClickHome}>
  <!-- {#if currentType === 'home'} -->
    <h1 class={currentType}>Potato Pong</h1>
  <!-- {/if} -->
  <nav class={currentType}>
    <!-- <a href=""></a> -->
    <!-- i might change these to links rather than buttons, i kinda hate the buttons -->
    <button>My Stats</button>
    <button>Stream</button>
    <button on:click={handleClickLogout}>Log Out</button>
  </nav>
</header>

<style>
  /* See "possible_fonts.css" for more font options... */
  @font-face {
    font-family: 'Bondi';
    src:url('/fonts/Bondi.ttf.woff') format('woff'),
        url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
        url('/fonts/Bondi.ttf.eot'),
        url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
  }
  

/* There is a bunch of unncessary shit in here... why so many flex grids, why is everything the same class? just seemed easier but... */


  header{
    /* background: #f7f7f7; */
    background: #618174;
    /* padding: 20px; */
    margin: 0;
    /* does nothing so far... */
    /* display: flex; */
  }

  header.home{
    /* position: sticky; */
  }
  header.regular{
    /* for some reason this doesn't do shit! */
    position: sticky;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

/* Headers */
  h1{
    font-family: 'Bondi';
  }
  h1.home {
    margin: 0;
    text-align: center;
    /* max-width: 100px; */
  }
  h1.regular{
    margin: 0;
    text-align: left;
    /* max-width: 40px; */
    /* this helped with the weird extra space under the image... */
    display: flex;
    justify-self: center;
    align-self: center;
  }

/* Images */
  img.home{
    /* text-align: center; */
    /* get the image squarely in the middle... */
    cursor: pointer;
    max-width: 100px;
  }
  img.regular{
    cursor: pointer;
    max-width: 40px;
    padding: 7px 20px;
    justify-self: left;
  }

  nav{
    display: flex;
    justify-content: right;
  }

  nav button{
    margin: 7px 20px;
    /* padding: 5px; */
    border-radius: 4px;
  }

  /* .none{

  } */
</style>