How to pass data between components Laravel - laravel

Question

Hello I'm confused on how should I pass collections/data to another component so I can display it in another component (in this case I'm showing discounts so it will be a section with popular discounts and another section showing latest discounts).
So i have this index.blade.php and i'm a bit confused on how to pass the data to x-discount-card component so I can access to $discount->title on the component. Right now I get "undefined variable $discount" so it seems i'm not accessing it right.
<x-layout>
<main>
#include('components.categories-row')
#include('discounts._best')
<section class="w-4/6 mx-auto my-8 font-bold flex flex-col items-center justify-center">
<h1 class="uppercase text-main-gray text-4xl bold self-start text-center mb-4 ">Últimos Descuentos</h1>
#if($discounts->count())
#foreach($discounts as $discount)
<x-discount-card :discount="$discount" />
#endforeach
#else
<p class="my-8 text-center">No hay descuentos disponibles. Por favor vuelva mas tarde. </p>
#endif
</section>
</main>
</x-layout>
discount-component
#props(['discount'])
<div
class="w-[20rem] h-auto bg-gradient-to-b from-card-light-gray to-card-main-gray p-6 rounded-2xl drop-shadow-xl md:w-[35rem] lg:w-[35rem] lg:w-[50rem] lg:h-auto mb-4">
<div class="flex-col items-center text-center justify-center h-full lg:grid lg:grid-cols-4 lg:grid-rows-4">
<a href="" class="flex justify-center lg:row-span-4 lg:-ml-10">
<img class="h-full " src="/images/pngwing.com.png" alt="" width="120" height="120">
</a>
<div
class="flex-col justify-center items-center text-center w-full lg:col-start-2 lg:col-span-full lg:row-start-1 lg:row-span-full lg:-ml-14">
<a href="/discount/1" class="lg:grid lg:row-start-2">
<h2 class="text-white font-bold text-lg md:text-2xl lg:my-2">{{ $discount->title }}</h2>
<div class="flex my-4 items-center text-center justify-center lg:my-2">
<p class="text-price-color font-bold mr-8 text-xl md:text-2xl">139,99€</p>
<p class="line-through text-white text-lg md:text-lg">149,99 (-10€)</p>
</div>
<p class="text-white my-8 text-sm md:text-lg lg:my-4">Bambas nike con 10€ de descuento y envio gratis.
Salen a
139,99€</p>
</a>
<div
class="flex-col items-center justify-center gap-2 lg:flex-row lg:inline-flex lg:col-start-2 lg:col-span-full lg:row-start-4 lg:row-end-5">
<a class="flex items-center justify-center my-2 " href="/user/1">
<img class="rounded-full mr-2" src="https://i.pravatar.cc/35"
alt="">
<p class="mr-4 text-white text-sm font-bold transition-transform hover:translate-x-0.5 md:text-lg">
JohnDoe</p>
</a>
<div class="flex items-center justify-center my-4 gap-4 lg:mx-4">
<div
class="border border-light-gray p-1 rounded-md transition-transform hover:-translate-y-0.5 cursor-pointer">
<img class="h-full" src="/images/heart.png" alt="" width="22" height="22">
</div>
<div
class="border border-light-gray p-1 rounded-md transition-transform hover:-translate-y-0.5 cursor-pointer">
<img class="h-full" src="/images/dislike.png" alt="" width="22" height="22">
</div>
<div
class="flex items-center border border-light-gray p-1 rounded-md transition-transform hover:-translate-y-0.5 cursor-pointer lg:px-4">
<img class="h-full" src="/images/comment.png" alt="" width="22" height="22">
<p class="text-light-gray ml-2">10</p>
</div>
</div>
<div class="flex justify-center lg:w-[250px] lg:-mr-14">
<button
class="flex my-4 items-center justify-center bg-gradient-to-b from-button-light-orange to-button-dark-orange p-2 rounded-md transition-transform hover:-translate-y-0.5 md:p-4 lg:w-full ">
<p class="text-light-gray mr-4 font-bold text-sm md:text-lg ">Ver Chollo</p>
<img src="/images/external-link.png" alt="" width="20" height="20">
</button>
</div>
</div>
</div>
</div>
<div
class="w-auto absolute top-5 left-5 flex-col items-center justify-center rounded-2xl bg-button-light-orange p-2 drop-shadow-lg md:flex-row md:inline-flex">
<p class="text-white text-xs uppercase font-bold mr-2 md:text-sm ">10%</p>
<p class="text-white text-xs uppercase font-bold md:text-sm ">descuento</p>
</div>
</div>
Also on the routes file i'm passing discounts but i'm a bit confused on how should I pass the data because right now i'm getting "undefined variable $discount error"
Route::get('/', function () {
return view('discounts.index', [
'discounts' => Discount::all(),
// ->where('premium','=',false)
'categories' => Category::all()
]);
})->name('home');
On the discounts._best component i'll display the discounts with more likes but this will be done in the future but I share the component too because maybe something there is what is causing the error.
<section class=" w-full text-center h-3/4 bg-light-gray flex flex-col items-center justify-center p-10">
<h1 class="uppercase text-main-gray mb-8 text-4xl font-bold">Descuentos Populares</h1>
<x-discount-card />
</section>
I searched on the Laravel Documentation about Component attributes but I dont know what i'm doing wrong and still confused.