package components

templ likeButton(liked bool) {
<button class="hover:cursor-pointer">
  <svg class="h-6 text-red-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    if liked {
    <path
      d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z"
      fill="currentColor"></path>
    } else {
    <path fill-rule="evenodd" clip-rule="evenodd"
      d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z"
      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
    }
  </svg>
</button>
}

templ RecipeCardSmall(name, meal, author string, liked bool) {
<div
  class="w-44 md:w-48 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0">
  <img class="size-32 md:size-32 rounded-sm" src="" />
  <div class="w-full mt-8">
    <h2 class="font-semibold overflow-hidden whitespace-nowrap text-ellipsis">
      { name }
    </h2>
    <p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis">
      { author }
    </p>
    <div class="flex items-end justify-between">
      <p class="text-xs mt-4 bg-gray-200 rounded-lg w-fit px-2 py-1">
        { meal }
      </p>
      @likeButton(liked)
    </div>
    <button
      class="w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200">
      Make Now!
    </button>
  </div>
</div>
}

templ RecipeCardLarge(liked bool) {
<div class="w-9/10 md:w-2/5 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4">
  <img class="size-80 md:size-64 rounded-sm" src="" />
  <div class="mt-8">
    <h2 class="font-semibold">Avocado Toast</h2>
    <p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis">
      Hayden Hargreaves
    </p>
    <p class="text-sm overflow-hidden [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:4] my-2">
      Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to
      make the BEST avocado toast with this recipe, plus fun variations.
      Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to
      make the BEST avocado toast with this recipe, plus fun variations.
      Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to
      make the BEST avocado toast with this recipe, plus fun variations.
    </p>
    <div class="flex items-center justify-between">
      <p class="text-xs my-2 bg-gray-200 rounded-lg w-fit px-2 py-1 mt-2">
        Breakfast - 15 min
      </p>
      @likeButton(liked)
    </div>
    <button
      class="w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200">
      Make Now!
    </button>
  </div>
</div>
}