// === import ===
import EventCard from '@/components/aia/event-card';
import { Carousel } from '@/components/aia/carousel';
import { useState, useEffect, useRef } from 'react';
import { carousel } from '@vendor-web/js/patterns/carousel.js';

type Post = {
  id: number;
  title: string;
  slug: string;
  excerpt: string;
  content: string;
  image_url: string;
  post_type: string;
  status: string;
  published_at: string;
  date: string;
  time?: string;
  address?: string;
  description?: string;
  link?: string;
  categories: Array<{
    id: number;
    name: string;
    slug: string;
  }>;
};

type LatestProps = {
  landingEvents: Post[];
};

export default function Latest(
  { landingEvents }: LatestProps
) {
  const eventCards = landingEvents.map((post: Post) => {
    const detailRoute = post.post_type === 'event' ? 'event.show' : 'news.show';
    return {
      eventCardTitle: post.title,
      eventCardType: post.post_type,
      eventCardDate: post.date,
      eventCardLocation: post.address || '',
      eventCardImage: post.image_url,
      eventCardLink: route(detailRoute, { post: post.slug }),
      eventCardLinkText: "for more information",
    };
  });



  return (
    <section className="eventNewsCarousel">
      <div className="container eventNewsCarousel-container">
        <hgroup className="eventNewsCarousel-header">
          <h2 className="eventNewsCarousel-heading text-h1-bold">Latest</h2>
          <button type="button" className="button button--second eventNewsCarousel-action">
            <span className="button-text">See all News & Events</span>
          </button>
        </hgroup>
        <Carousel className="eventNewsCarousel-carousel">
          {eventCards.map((card: any, index: number) => (
            <EventCard
              key={index}
              darkBackground={false}
              eventCardTitle={card.eventCardTitle}
              eventCardType={card.eventCardType}
              eventCardDate={card.eventCardDate}
              eventCardLocation={card.eventCardLocation}
              eventCardImage={card.eventCardImage}
              eventCardLink={card.eventCardLink}
              eventCardLinkText={card.eventCardLinkText}
            />
          ))}
        </Carousel>
      </div>
    </section>
  );
}