<script lang="ts">
  import { createEventDispatcher } from 'svelte';

  let dispatch = createEventDispatcher();

  let types: string[] = ['home', 'regular', 'none'];
  // let currentType: string = 'regular';
  export let currentType = 'home';

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

</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}>
  <h1 class={currentType}>
    <img class={currentType} src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={handleClick}>
  </h1>
  <!-- {#if currentType === 'home'} -->
    <h1 class={currentType}>Potato Pong</h1>
  <!-- {/if} -->
</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;
    font-family: 'Bondi';
    /* does nothing so far... */
    /* display: flex; */
  }

  header.home{
    /* position: sticky; */
  }
  header.regular{
    position: sticky;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  header.regular > h1:first-child{
    justify-self: left;
  }
  header.regular > h1:nth-child(2){
    justify-items: center;
  }

/* Headers */
  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 */
  h1 img.home{
    /* text-align: center; */
    /* get the image squarely in the middle... */
    cursor: pointer;
    max-width: 100px;
  }
  h1 img.regular{
    cursor: pointer;
    max-width: 40px;
    padding: 7px 15px;
  }


  /* .none{

  } */
</style>