// === imports ===
import Button from '@/components/aia/button';
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 SectionLandingProps = {
  landingEvents: Post[];
};

export default function SectionLanding(
  { landingEvents }: SectionLandingProps
) {
  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",
    };
  });

  useEffect(() => {
    console.log('%%%%%%%', landingEvents);
  }, []); // 空依賴陣列 -> 僅在初次掛載執行一次




  // useEffect(() => {
  //   (async () => {
  //     setEvents(await getNewsData());
  //     console.log('$$$$$$$', events);
  //   })();
  // }, []); // 空依賴陣列 -> 僅在初次掛載執行一次

  return (

    <section className="landing">
      <div className="container landing-container">
        <div className="landing-contentContainer">
          <figure className="landing-visual">
            {/* <img
              className="object-cover object-bottom w-full h-full"
              src="images/bg-landing.png"
              alt="Landing Background"
            /> */}
            <video preload="auto" autoPlay loop muted playsInline className="object-cover object-bottom w-full h-full" src="/video/landing.mp4" poster="./images/bg-landing.png"></video>
          </figure>
          <div className="landing-content">
            <h1 className="text-sp">
              AI for All,
              <br />
              All in AI
            </h1>
            <p className="text-t3-medium">
              Fostering a thriving AI ecosystem in Taiwan
            </p>
            <div className="landing-action">
              <Button
                as="a"
                href={route('about')}
                buttonType="button"
                type="button button--ghost "
                label="About AIA"
              />
              <Button
                as="a"
                href={route('about')}
                buttonType="button"
                type="button button--second "
                label="About AIA"
              />

            </div>
          </div>
        </div>
      </div>
      <div className="landing-container">
        <div className="landing-eventContainer">
          <Carousel className="landing-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>
      </div>
    </section>

  );


}