@inject IJSRuntime JS

@* Hidden div to ensure Tailwind JIT generates classes used in carousal.js *@
<div
  class="hidden scale-100 scale-125 duration-[4000ms] transition-all transition ease-in-out text-accent lg:text-5xl md:text-4xl">
</div>

<div class="relative overflow-hidden w-full h-full bg-black">
  <img id="mainImage" src="" class="absolute inset-0 w-full h-full object-cover" />

  <div class="absolute inset-0 flex items-center justify-center bg-black/20">
    <div class="ml14 text-center">
      <span class="text-wrapper relative inline-block p-4">
        <span class="line absolute bottom-0 left-0 w-full h-1 bg-accent origin-left"></span>
        <span id="mainText"
          class="letters block overflow-hidden lg:text-5xl md:text-4xl text-3xl font-bold text-white"></span>
      </span>
    </div>
  </div>

  <div class="absolute inset-x-0 top-1/2 -translate-y-1/2 flex justify-between px-5 pointer-events-none">
    <button id="prev" class="btn btn-circle btn-ghost bg-black/20 text-white pointer-events-auto">❮</button>
    <button id="next" class="btn btn-circle btn-ghost bg-black/20 text-white pointer-events-auto">❯</button>
  </div>
</div>

<style>
  .ml14 .text-wrapper {
    position: relative;
    display: inline-block;
  }

  .ml14 .line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
  }

  .ml14 .letter {
    display: inline-block;
    line-height: 1em;
  }
</style>

@code {

  [Parameter]
  public List<(string Text, string ImageUrl)>? Data { get; set; }

  [Parameter]
  public List<string>? Images { get; set; }

  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
    if (firstRender)
    {
      var dataToPass = new List<string[]>();

      if (Data != null && Data.Any())
      {
        foreach (var item in Data)
        {
          dataToPass.Add(new[] { item.Text, item.ImageUrl });
        }
      }
      else if (Images != null && Images.Any())
      {
        foreach (var img in Images)
        {
          dataToPass.Add(new[] { "", img });
        }
      }

      if (dataToPass.Any())
      {
        await JS.InvokeVoidAsync("animate", dataToPass);
      }
    }
  }
}