<script lang="ts">
  import type { MouseEventHandler } from "svelte/elements";
  let { data } = $props<{ data: { pork: Pork[] } }>();
  interface Pork {
    pork: {
      name: string;
      min_weight: number;
      max_weight: number;
      stock: number;
      raw_cut: boolean;
      id: number;
      preweighed: boolean;
    };
  }

  let selected = $state("Chop");
  const PRICE_PER_LB = 6;

  const change_photo: MouseEventHandler<HTMLLIElement> = ({
    currentTarget: { id },
  }) => {
    console.log(id);
    selected = id;
  };
</script>

<svelte:head>
  <title>Sludge Farm Pork</title>
  <meta
    name="description"
    content="Please buy some Pork, it tastes good I swear"
  />
</svelte:head>

<section>
  <h1><b>F</b>arm Raised Pork</h1>
  <h5>this ain't your grocery store's pork</h5>
  <h5>All priced at {PRICE_PER_LB}$/#</h5>
  <div id="tui">
    <ol>
      <li>
        <span>Cut</span>
        <span>Weight</span>
      </li>
      {#each data.pork as { name, preweighed, min_weight, max_weight }}
        <li onmouseenter={change_photo} id={name}>
          <span>{name}</span>
          {#if preweighed}
            <span>{min_weight} lb</span>
          {:else}
            <span>{min_weight} ~ {max_weight} lbs</span>
          {/if}
        </li>
      {/each}
    </ol>
    <img
      src={`/pork/${selected.replace(" ", "_")}.jpg`}
      alt={`Image of a ${selected}`}
    />
  </div>
</section>

<style lang="scss">
  b {
    font-family: "Initials";
    font-weight: 100;
  }

  section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    h1 {
      font-family: "Initials";
      text-align: center;
      font-size: 2.5rem;
      font-weight: 500;
      text-shadow: 3px 3px 3px var(--primary-8);
    }
    h5 {
      font-size: 0.75rem;
      color: var(--primary-8);
    }

    img {
      display: none;
    }

    #tui {
      display: flex;
      width: 90%;
      font-size: 1rem;
      gap: 1rem;

      ol {
        width: 100%;
        display: inherit;
        flex-direction: column;
        list-style: none;
        li {
          display: inherit;
          gap: 1rem;
          padding-left: 1rem;
          span {
            flex-basis: 50%;
            text-align: center;
            text-shadow: 3px 3px 3px var(--primary-7);
            &:first-child {
              text-align: left;
            }
          }
          &:nth-child(2n) {
            background: var(--primary-8);
          }
          &:not(:first-child):hover {
            background: var(--primary-10);
          }
        }
      }
    }
  }

  @media screen and (min-width: 640px) {
    img {
      display: unset !important;
      width: 50%;
      height: fit-content;
      border-radius: 0.375rem;
      text-align: center;
      align-self: center;
    }
  }
</style>

