<div
  class="tw-w-full tw-max-w-4xl tw-p-6 sm:tw-p-8 tw-bg-background tw-rounded-xl tw-border tw-border-solid tw-border-secondary-300 tw-flex tw-flex-col lg:tw-flex-row tw-gap-6 tw-items-center"
  data-testid="empty-state-card"
>
  <div class="tw-flex-1 tw-flex tw-flex-col tw-gap-4 sm:tw-gap-5 tw-w-full lg:tw-w-auto">
    <div class="tw-text-main tw-text-lg sm:tw-text-xl tw-font-medium tw-leading-6 sm:tw-leading-7">
      {{ title() }}
    </div>

    @if (description()) {
      <div class="tw-text-main tw-text-sm sm:tw-text-base tw-font-normal tw-leading-normal">
        {{ description() }}
      </div>
    }
    @if (benefits().length > 0) {
      <div class="tw-flex tw-flex-col tw-gap-4 sm:tw-gap-5" data-testid="benefits-list">
        @for (benefit of benefits(); track $index) {
          <div class="tw-flex tw-items-start tw-gap-3">
            <div
              class="tw-size-8 sm:tw-size-9 tw-bg-secondary-100 tw-rounded-full tw-flex tw-justify-center tw-items-center tw-flex-shrink-0"
            >
              <div
                class="tw-text-center tw-text-main tw-text-sm sm:tw-text-base tw-font-medium tw-leading-normal"
              >
                {{ $index + 1 }}
              </div>
            </div>
            <div class="tw-flex-1 tw-pt-1 sm:tw-pt-1.5 tw-flex tw-flex-col tw-gap-1">
              <div class="tw-text-main tw-text-sm sm:tw-text-base tw-font-medium tw-leading-normal">
                {{ benefit[0] }}
              </div>
              <div class="tw-text-main tw-text-xs tw-font-normal tw-leading-none">
                {{ benefit[1] }}
              </div>
            </div>
          </div>
        }
      </div>
    }

    @if (buttonText() && buttonAction()) {
      <div class="tw-flex tw-justify-start">
        <button
          (click)="buttonAction()()"
          bitButton
          buttonType="primary"
          type="button"
          class="tw-px-3 tw-py-1.5 sm:tw-px-4 tw-rounded-full tw-text-sm sm:tw-text-base"
        >
          @if (buttonIcon()) {
            <i [class]="buttonIcon() + ' tw-mr-2'"></i>
          }
          {{ buttonText() }}
        </button>
      </div>
    }
  </div>

  @if (videoSrc() || icon()) {
    <div class="tw-hidden lg:tw-block tw-flex-shrink-0" data-testid="media-container-desktop">
      <div class="tw-size-64 xl:tw-size-80 tw-relative">
        @if (videoSrc()) {
          <video
            class="tw-size-full tw-rounded-lg"
            [src]="videoSrc()"
            autoplay
            loop
            muted
            playsinline
            aria-hidden="true"
          ></video>
        } @else if (icon()) {
          <div
            class="tw-size-full tw-flex tw-items-center tw-justify-center tw-bg-secondary-100 tw-rounded-lg"
          >
            <bit-svg
              [content]="icon()"
              class="tw-size-16 xl:tw-size-24 tw-text-muted"
              aria-hidden="true"
            ></bit-svg>
          </div>
        }
      </div>
    </div>
    <div
      class="tw-flex lg:tw-hidden tw-w-full tw-justify-center"
      data-testid="media-container-mobile"
    >
      <div class="tw-size-48 sm:tw-size-64 tw-relative">
        @if (videoSrc()) {
          <video
            class="tw-size-full tw-rounded-lg"
            [src]="videoSrc()"
            autoplay
            loop
            muted
            playsinline
            aria-hidden="true"
          ></video>
        } @else if (icon()) {
          <div
            class="tw-size-full tw-flex tw-items-center tw-justify-center tw-bg-secondary-100 tw-rounded-lg"
          >
            <bit-svg
              [content]="icon()"
              class="tw-size-12 sm:tw-size-16 tw-text-muted"
              aria-hidden="true"
            ></bit-svg>
          </div>
        }
      </div>
    </div>
  }
</div>
