<script lang="ts">
  import type { MouseEventHandler } from "svelte/elements";

  let { data } = $props<{ html: string }>();
  let people = $state(data.people);
  let tents = $state(data.tents);
  let cars = $state(data.cars);

  const add: MouseEventHandler<HTMLButtonElement> = ({
    currentTarget: {
      dataset: { id },
    },
  }) => {
    if (id == "people") people += 1;
    if (id == "tents") tents += 1;
    if (id == "cars") cars += 1;
  };
  const subtract: MouseEventHandler<HTMLButtonElement> = ({
    currentTarget: {
      dataset: { id },
    },
  }) => {
    if (id == "people") people -= 1;
    if (id == "tents") tents -= 1;
    if (id == "cars") cars -= 1;
  };
</script>

<section>
  <h1>How many people are at Sludge Fest {data.year}?</h1>
  <div>
    <div>
      <button data-id="people" onclick={add}>+</button>
      <h3>~{people} people</h3>
      <button data-id="people" onclick={subtract}>-</button>
    </div>
    <div>
      <button data-id="tents" onclick={add}>+</button>
      <h3>~{tents} tents</h3>
      <button data-id="tents" onclick={subtract}>-</button>
    </div>
    <div>
      <button data-id="cars" onclick={add}>+</button>
      <h3>~{cars} cars</h3>
      <button data-id="cars" onclick={subtract}>-</button>
    </div>
  </div>
  <form method="POST">
    <input hidden type="number" name="people" value={people} />
    <input hidden type="number" name="cars" value={cars} />
    <input hidden type="number" name="tents" value={tents} />
    <button>Save</button>
  </form>
</section>

<style lang="scss">
  button {
    background: var(--primary-5);
    border-radius: 0.25rem;
    font-size: 2rem;
    border: none;
    box-shadow: var(--bs);
    &:hover {
      background: var(--primary-7);
    }
  }
  section {
    max-width: 60rem;
    margin: 1rem auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    h1 {
      font-size: 1.5rem;
    }

    div {
      text-align: center;
      display: flex;
      flex-direction: column;
      width: 100%;
      justify-content: center;
      gap: 1rem;
      max-width: 30rem;
      div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        h3 {
          font-size: 1.75rem;
          width: fit-content;
        }
        button {
          flex-basis: 4rem;
        }
      }
    }
    form button {
      margin: 1rem;
      width: fit-content;
    }
  }
</style>
