<script>
  import { onMount } from 'svelte';
  import axios from 'axios';
  let info = {};
  let name;
  let img;

  const options = {
    country: 'world',
  };

  const API_URL = `https://${options.country}.openfoodfacts.org`;

  function getProductCard(barcode) {
    axios
      .get(`${API_URL}/api/v0/product/${barcode}.json`)
      .then((response) => {
        info = response.data.product;
        img = info.image_front_url;
        name = info.product_name;
        console.log(info);
      })
      .catch((error) => {
        console.error(error);
      });
  }

  onMount(async () => {
    console.debug(`Card mounted, got ${barcode} product code`);
    getProductCard(barcode);
  });

  export let barcode;
</script>

<div class="card">
  <h3>{ name }</h3>
  <img src={img} alt={name}>
</div>
