@props([
    'bg' => 'bg-white',
    'src' => '',
    'srcMobile' => '',
    'active' => false,
    'type' => 'pool',
])
<div {{ $attributes->merge(['class' => $bg . ' py-4']) }}>
  <div class="flex flex-wrap md:flex-nowrap container">
    <picture class="md:flex-1 max-h-48 md:max-h-[initial]">
      @isset($srcMobile)
        <source srcset="{{ $srcMobile }}" media="(max-width: 767px)">
      @endisset
      <img src="{{ $src }}" class="h-full w-full object-cover object-center md:object-top" alt="Picture of a pool" width="500"
        height="auto" loading="lazy">
    </picture>
    <div class="content flex flex-1 items-center">
      <div class="flex flex-col justify-center p-6 md:px-10 lg:px-28 w-full">
        {{ $slot }}
        <button type="button" class="btn btn-primary w-fit px-6 py-2 text-lg" {{ !$active ? "disabled" : "" }} @click="appStarted = true; initReactApp('{{ $type }}')">{{ $active ? "Select This Project" : "Comming Soon" }}</button>
      </div>
    </div>
  </div>
</div>