<script lang="ts">
  import { RAW_COST, PROCESSED_COST } from '$lib/index';
  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")

  function change_photo({target:{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>
  <div id="tui">
    <ol>
      <li><span>Cut</span><span>Weight</span><span class="small">$/#</span><span class="small">Stock</span></li>
      {#each data.pork as {name, raw_cut, preweighed, min_weight, max_weight, stock}}
        {@const price_per_lb = raw_cut ? RAW_COST : PROCESSED_COST}
        <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}
          <span class="small">{price_per_lb}$</span>
          <span class="small">{stock}</span>
        </li>
      {/each}
    </ol>
    <img src={`/pork/${selected.replace(' ', '_')}.jpg`} alt={`Image of a ${selected}`} />
  </div>
</section>

<style lang="scss">
  @use '/src/app.scss' as *;
  @use 'sass:color';


  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 $green;
    }
    h5{
      font-size: 0.75rem;
      color: color.adjust($yellow, $alpha: -0.5)
    }

    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 $green;
            &.small{
              flex-basis: 25%;
            }
            &:first-child{
              text-align: left;
            }
          }
          &:nth-child(2n){
            background: color.adjust($blue,  $alpha: -0.75);
          }
          &:not(:first-child):hover{
            background: color.adjust($green, $alpha: -0.5);
            // background: $green;
          }
        }
      }
    }
  }


  @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>