Event Header 6

import { useState } from "react";
import clsx from "clsx";
import { Badge } from "@/components/ui/badge";
import { Button, type ButtonProps } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { CalendarToday, ChevronRight, PlayCircle, ProgressActivity, Schedule } from "relume-icons";

type ImageProps = {
  src: string;
  alt?: string;
};

type Date = {
  weekday: string;
  day: string;
  month: string;
  year: string;
};

type Event = {
  url: string;
  image: ImageProps;
  video: string;
  date: Date;
  title: string;
  speakers: ImageProps[];
  description: string;
  button: ButtonProps;
};

type FeaturedEvent = Omit<Event, "date"> & { duration: string };

type Props = {
  tagline: string;
  heading: string;
  description: string;
  event: Event;
  featuredEvents: FeaturedEvent[];
};

export type EventHeader6Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;

export const EventHeader6 = (props: EventHeader6Props) => {
  const { tagline, heading, description, event, featuredEvents } = {
    ...EventHeader6Defaults,
    ...props,
  };

  const [isIframeLoaded, setIsIframeLoaded] = useState(false);

  return (
    <section className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container">
        <div className="mb-12 md:mb-18 lg:mb-20">
          <div className="w-full max-w-lg">
            <p className="mb-3 font-semibold md:mb-4">{tagline}</p>
            <h1 className="mb-5 text-h2 font-bold md:mb-6">{heading}</h1>
            <p className="text-medium">{description}</p>
          </div>
        </div>
        <Card className="mb-12 grid auto-cols-fr auto-rows-auto grid-cols-1 items-center md:mb-18 lg:mb-20 lg:grid-cols-2">
          <Dialog>
            <DialogTrigger asChild>
              <button className="relative flex w-full items-center justify-center">
                <img
                  src={event.image.src}
                  alt={event.image.alt}
                  className="aspect-8/6 size-full object-cover"
                />
                <span className="absolute inset-0 z-10 bg-neutral-darkest/50" />
                <Badge className="absolute top-4 left-4 z-20 gap-2">
                  <CalendarToday className="size-6 flex-none text-scheme-text" />
                  <span>
                    {event.date.weekday} {event.date.day} {event.date.month} {event.date.year}
                  </span>
                </Badge>
                <PlayCircle className="absolute z-20 size-20 text-white" />
              </button>
            </DialogTrigger>
            <DialogContent>
              {!isIframeLoaded && (
                <ProgressActivity className="mx-auto size-16 animate-spin text-white" />
              )}
              <iframe
                className={clsx("z-0 mx-auto aspect-video size-full md:w-[738px] lg:w-[940px]", {
                  visible: isIframeLoaded,
                  hidden: !isIframeLoaded,
                })}
                src={event.video}
                allow="autoplay; encrypted-media; picture-in-picture"
                allowFullScreen
                onLoad={() => setIsIframeLoaded(true)}
              />
            </DialogContent>
          </Dialog>
          <div className="flex flex-col items-start p-6 md:p-12">
            <a className="block" href={event.url}>
              <h2 className="text-h5 font-bold">{event.title}</h2>
            </a>
            {event.speakers?.length > 0 && (
              <div className="mt-3 space-y-2 md:mt-4">
                <h4 className="font-semibold">Speakers</h4>
                <div className="flex items-center">
                  {event.speakers.map((speaker, index) => (
                    <div
                      key={index}
                      className="-ml-2 block size-10 min-h-10 min-w-10 overflow-hidden rounded-full border-2 border-scheme-foreground first-of-type:ml-0"
                    >
                      <img src={speaker.src} alt={speaker.alt} className="size-full object-cover" />
                    </div>
                  ))}
                </div>
              </div>
            )}
            <div className="mt-3 md:mt-4">
              <h4 className="mb-2 font-semibold">Details</h4>
              <p>{event.description}</p>
            </div>
            <Button
              {...event.button}
              className="mt-5 flex items-center justify-center gap-x-2 md:mt-6"
            >
              {event.button.title}
            </Button>
          </div>
        </Card>
        <div>
          <h2 className="mb-6 text-h5 font-bold md:mb-8">Featured Events</h2>
          <div className="grid gap-x-8 gap-y-12 md:grid-cols-2 md:gap-y-16 lg:grid-cols-3">
            {featuredEvents.map((event, index) => (
              <FeaturedEvent key={index} {...event} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const FeaturedEvent: React.FC<FeaturedEvent> = ({
  url,
  image,
  video,
  duration,
  title,
  speakers,
  description,
  button,
}) => {
  const [isIframeLoaded, setIsIframeLoaded] = useState(false);
  return (
    <Card className="flex flex-col">
      <Dialog>
        <DialogTrigger className="relative aspect-[3/2]" asChild>
          <button className="absolute inset-0 flex w-full max-w-full items-center justify-center">
            <img src={image.src} className="size-full object-cover" alt={image.alt} />
            <PlayCircle className="absolute z-20 size-20 text-white" />
            <span className="absolute inset-0 z-10 bg-neutral-darkest/50" />
          </button>
        </DialogTrigger>
        <DialogContent>
          {!isIframeLoaded && (
            <ProgressActivity className="mx-auto size-16 animate-spin text-white" />
          )}
          <iframe
            className={clsx("z-0 mx-auto aspect-video size-full md:w-[738px] lg:w-[940px]", {
              visible: isIframeLoaded,
              hidden: !isIframeLoaded,
            })}
            src={video}
            allow="autoplay; encrypted-media; picture-in-picture"
            allowFullScreen
            onLoad={() => setIsIframeLoaded(true)}
          ></iframe>
        </DialogContent>
      </Dialog>
      <div className="p-6">
        <div className="mb-3 flex items-center gap-2 text-small md:mb-4">
          <Schedule className="size-6 flex-none text-scheme-text" />
          <span>{duration} minutes</span>
        </div>
        <a className="mb-2 block" href={url}>
          <h3 className="text-h5 font-bold">{title}</h3>
        </a>
        <p className="mb-2">{description}</p>
        <div className="flex items-center gap-2">
          <h4 className="font-semibold">Speakers:</h4>
          {speakers.length > 0 && (
            <div className="flex items-center">
              {speakers.map((speaker, index) => (
                <div
                  key={index}
                  className="-ml-2 block size-10 min-h-10 min-w-10 overflow-hidden rounded-full border-2 border-scheme-foreground first-of-type:ml-0"
                >
                  <img src={speaker.src} alt={speaker.alt} className="size-full object-cover" />
                </div>
              ))}
            </div>
          )}
        </div>
        <Button {...button} className="mt-5 md:mt-6">
          {button.title}
        </Button>
      </div>
    </Card>
  );
};

export const EventHeader6Defaults: Props = {
  tagline: "Tagline",
  heading: "Webinars",
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
  event: {
    url: "#",
    image: {
      src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
      alt: "Relume placeholder image 1",
    },
    video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
    date: {
      weekday: "Sat",
      day: "10",
      month: "Feb",
      year: "2024",
    },
    title: "Webinar title heading",
    speakers: [
      {
        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
        alt: "Speaker 1",
      },
      {
        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
        alt: "Speaker 2",
      },
      {
        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
        alt: "Speaker 3",
      },
      {
        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
        alt: "Speaker 4",
      },
    ],
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
    button: {
      variant: "secondary",
      title: "Save my spot",
    },
  },
  featuredEvents: [
    {
      url: "#",
      image: {
        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
        alt: "Relume placeholder image 2",
      },
      video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
      duration: "45",
      title: "Webinar title heading",
      speakers: [
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 1",
        },
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 2",
        },
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 3",
        },
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 4",
        },
      ],
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
      button: {
        title: "Register now",
        variant: "link",
        size: "link",
        iconRight: <ChevronRight className="text-scheme-text" />,
      },
    },
    {
      url: "#",
      image: {
        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
        alt: "Relume placeholder image 3",
      },
      video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
      duration: "45",
      title: "Webinar title heading",
      speakers: [
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 1",
        },
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 2",
        },
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 3",
        },
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 4",
        },
      ],
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
      button: {
        title: "Register now",
        variant: "link",
        size: "link",
        iconRight: <ChevronRight className="text-scheme-text" />,
      },
    },
    {
      url: "#",
      image: {
        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
        alt: "Relume placeholder image 4",
      },
      video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
      duration: "45",
      title: "Webinar title heading",
      speakers: [
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 1",
        },
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 2",
        },
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 3",
        },
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 4",
        },
      ],
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
      button: {
        title: "Register now",
        variant: "link",
        size: "link",
        iconRight: <ChevronRight className="text-scheme-text" />,
      },
    },
    {
      url: "#",
      image: {
        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
        alt: "Relume placeholder image 5",
      },
      video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
      duration: "45",
      title: "Webinar title heading",
      speakers: [
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 1",
        },
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 2",
        },
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 3",
        },
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 4",
        },
      ],
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
      button: {
        title: "Register now",
        variant: "link",
        size: "link",
        iconRight: <ChevronRight className="text-scheme-text" />,
      },
    },
    {
      url: "#",
      image: {
        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
        alt: "Relume placeholder image 6",
      },
      video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
      duration: "45",
      title: "Webinar title heading",
      speakers: [
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 1",
        },
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 2",
        },
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 3",
        },
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 4",
        },
      ],
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
      button: {
        title: "Register now",
        variant: "link",
        size: "link",
        iconRight: <ChevronRight className="text-scheme-text" />,
      },
    },
    {
      url: "#",
      image: {
        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
        alt: "Relume placeholder image 7",
      },
      video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
      duration: "45",
      title: "Webinar title heading",
      speakers: [
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 1",
        },
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 2",
        },
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 3",
        },
        {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Speaker 4",
        },
      ],
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
      button: {
        title: "Register now",
        variant: "link",
        size: "link",
        iconRight: <ChevronRight className="text-scheme-text" />,
      },
    },
  ],
};