<LinkTo
  {{on 'focus' @handleFocus}}
  {{on 'blur' @handleBlur}}
  @route="meal"
  @model={{@meal}}
  class="block bg-white border border-gray-400 focus:border-teal-500 focus:shadow-sm focus:bg-teal-100 outline-none" data-test-id="meal-link">
  <div class="max-w-sm w-full lg:max-w-full lg:flex">
    <div class="h-48 lg:h-auto lg:w-48 flex-none">
      <img src={{@meal.thumbnailUrl}} alt="" role="presentation" class="h-full w-full object-cover" data-test-id="meal-preview-image">
    </div>
    <div class="p-4 flex flex-col justify-between leading-normal">
      <div class="mb-8">
        <div class="text-gray-900 font-bold text-xl mb-2" data-test-id="meal-name">
          {{@meal.name}}
        </div>
        <p class="text-gray-700 text-base" data-test-id="meal-ingredients-list">
          {{@meal.ingredientsList}}
        </p>
      </div>
      <div data-test-id="meal-tags">
        <MealTag>{{@meal.category}}</MealTag>
        <MealTag>{{@meal.area}}</MealTag>
      </div>
    </div>
  </div>
</LinkTo>
