sludge-link/;

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

  let { data } = $props<{ data: { pork: Pork[]; PRICE_PER_LB: number } }>();
  interface Pork {
    pork: {
      name: string;
      cured: boolean;
      tubed: boolean;
      lb_package: boolean;
      flavors: String[];
      avg_weight: {
        min: number;
        max: number;
      };
    };
  }

  onMount(async () => {
    const images = import.meta.glob("$lib/assests/*.jpg", {
      eager: true,
      query: { enhanced: true },
    });
    console.log(images);
  });
</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 {data.PRICE_PER_LB}$/#</h5>
  <div id="pork">
    {#each data.pork as { name, src, cured, tubed, lb_package, flavors, avg_weight }}
      <card id={name}>
        <h3>{name}</h3>
        {#if src != undefined}
          <img {src} alt="A photo of {name}" />
        {:else}
          <hr />
        {/if}
        <div>
          {#if cured}
            <span>Cured!</span>
          {/if}
          {#if tubed}
            <span>Tubed!</span>
          {/if}
          <p>
            Weight:
            {#if lb_package}
              1 lb
            {:else}
              {avg_weight.min}~ {avg_weight.max} lbs
            {/if}
          </p>
        </div>

        {#if flavors != undefined}
          <ul>
            <li>Flavors:</li>
            {#each flavors as flavor}
              <li>
                {flavor}
              </li>
            {/each}
          </ul>
        {/if}
      </card>
    {/each}
    <!-- <img -->
    <!--   src={`/pork/${selected.replace(" ", "_")}.jpg`} -->
    <!--   alt={`Image of a ${selected}`} -->
    <!-- /> -->
  </div>
</section>

<style lang="scss">
  b {
    font-family: "Initials";
    font-weight: 100;
    color: var(--secondary-5);
  }

  section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    h1 {
      font-family: "Initials";
      color: var(--secondary-3);
      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;
    // }
  }
  #pork {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    gap: 1rem;
    width: 100%;
    card {
      background: var(--secondary-9);
      border-radius: var(--br);
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      position: relative;
      img {
        width: 100%;
        border-radius: var(--br);
      }
      hr {
        height: 1rem;
        color: var(--secondary-9);
        width: 1rem;
      }
      div {
        display: flex;
        justify-content: space-around;
        font-size: 0.75rem;
      }
      span {
        // font-size: 0.75rem;
        background: var(--primary-5);
        color: var(--primary-10);
        font-weight: 900;
        width: fit-content;
        border-radius: var(--br);
        padding: 0.125rem 0.325rem;
      }
      h3 {
        position: absolute;
        background: var(--secondary-9);
        border-radius: 0 0 var(--br) 0;
        padding: 0.25rem 0.5rem;
        top: 1rem;
        text-transform: capitalize;
        color: var(--primary-5);
      }
    }

    ul {
      font-size: 0.85rem;
      width: 100%;
      display: inherit;
      flex-direction: column;
      list-style: none;
      li {
        display: inherit;
        gap: 1rem;
        padding-left: 1rem;
        text-transform: capitalize;
        &:nth-child(even) {
          background: var(--primary-8);
        }
        &:not(:first-child):hover {
          background: var(--primary-10);
        }
      }
    }
  }

  @media screen and (min-width: 640px) {
    #pork {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;
      card {
        flex-basis: 20rem;
        // align-items: center;
        justify-content: center;
      }
    }
    // img {
    //   display: unset !important;
    //   width: 50%;
    //   height: fit-content;
    //   border-radius: 0.375rem;
    //   text-align: center;
    //   align-self: center;
    // }
  }
</style>