---
import { Image } from "astro:assets";
import IconButton from "@components/ui/IconButton.astro";
import { ButtonLink } from "@components/ui";
import ArrowLeft from "@assets/icons/arrow-left.svg";
import ArrowRight from "@assets/icons/arrow-right.svg";

interface Props {
  title: string;
  description: string;
  website?: {
    href: string;
    external?: boolean;
    track?: boolean;
    trackEvent?: string;
  };
  repository?: string;
  repositoryTrackEvent?: string;
  images: {
    src: ImageMetadata;
    alt: string;
  }[];
  even?: boolean;
}

const {
  title,
  description,
  website,
  repository,
  repositoryTrackEvent,
  images,
} = Astro.props;
const hasCarousel = images.length > 1;
---

<div
  class="grid grid-cols-1 gap-8 2xl:gap-0 min-h-[360px] items-center border-2 border-neutral-primary
  rounded-lg overflow-hidden bg-white"
>
  <div class="flex flex-col text-center md:text-start">
    <div
      class="flex flex-col md:flex-row w-full gap-4 md:gap-8 px-4 md:px-8 py-6 md:py-8 justify-between items-center"
    >
      <div class="flex flex-col gap-2">
        <div class="flex flex-row items-center justify-center md:justify-start">
          <h3 class="text-4xl font-bold">
            {title}
          </h3>
          <IconButton icon="externalLink" size="xs" />
        </div>
        <p class="text-lg md:text-xl text-content-secondary xl:text-balance">
          {description}
        </p>
      </div>
      <div
        class="flex flex-wrap justify-center md:justify-start gap-4 md:gap-5 self-center md:shrink-0"
      >
        {
          website && (
            <ButtonLink
              icon="externalLink"
              label="Go to website"
              href={website.href}
              external={website.external}
              track={website.track}
              trackEvent={website.trackEvent}
            />
          )
        }
        {
          repository && (
            <ButtonLink
              icon="github"
              label="View repository"
              href={repository}
              external
              trackEvent={repositoryTrackEvent}
            />
          )
        }
      </div>
    </div>

    <div
      class="relative overflow-hidden max-h-[720px]"
      oncontextmenu="return false"
      data-carousel
    >
      <div
        class="flex transition-transform duration-300 ease-in-out h-full"
        data-carousel-track
      >
        {
          images.map((img) => (
            <div class="w-full flex-shrink-0">
              <Image
                src={img.src}
                alt={img.alt}
                class="h-full w-full object-cover"
              />
            </div>
          ))
        }
      </div>
      {
        hasCarousel && (
          <div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-2">
            <button
              data-carousel-prev
              class="w-10 h-10 flex items-center justify-center border-2 border-white text-white rounded-full font-semibold cursor-pointer hover:bg-white hover:text-black transition-colors"
              aria-label="Previous image"
            >
              <ArrowLeft class="w-5 h-5" />
            </button>
            <button
              data-carousel-next
              class="w-10 h-10 flex items-center justify-center border-2 border-white text-white rounded-full font-semibold cursor-pointer hover:bg-white hover:text-black transition-colors"
              aria-label="Next image"
            >
              <ArrowRight class="w-5 h-5" />
            </button>
          </div>
        )
      }
    </div>
  </div>
</div>

<script>
  document.querySelectorAll("[data-carousel]").forEach((carousel) => {
    const track = carousel.querySelector(
      "[data-carousel-track]",
    ) as HTMLElement;
    const prev = carousel.querySelector("[data-carousel-prev]");
    const next = carousel.querySelector("[data-carousel-next]");
    if (!track) return;

    const slides = track.children.length;
    let current = 0;

    function update() {
      track!.style.transform = `translateX(-${current * 100}%)`;
    }

    prev?.addEventListener("click", () => {
      current = (current - 1 + slides) % slides;
      update();
    });

    next?.addEventListener("click", () => {
      current = (current + 1) % slides;
      update();
    });
  });
</script>