384da62b-b5c1-45ac-8cc7-9eee6bb53d91/src/components/sections/hero/HeroBillboardCarousel.tsx

"use client";

import TextBox from "@/components/Textbox";
import MediaContent from "@/components/shared/MediaContent";
import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
import { cls } from "@/lib/utils";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig } from "@/types/button";

export interface MediaItem {
    imageSrc?: string;
    videoSrc?: string;
    imageAlt?: string;
    videoAriaLabel?: string;
}

type HeroBillboardCarouselBackgroundProps = Extract<
  HeroBackgroundVariantProps,
  | { variant: "plain" }
  | { variant: "animated-grid" }
  | { variant: "canvas-reveal" }
  | { variant: "cell-wave" }
  | { variant: "downward-rays-animated" }
  | { variant: "downward-rays-animated-grid" }
  | { variant: "downward-rays-static" }
  | { variant: "downward-rays-static-grid" }
  | { variant: "gradient-bars" }
  | { variant: "radial-gradient" }
  | { variant: "rotated-rays-animated" }
  | { variant: "rotated-rays-animated-grid" }
  | { variant: "rotated-rays-static" }
  | { variant: "rotated-rays-static-grid" }
  | { variant: "sparkles-gradient" }
>;

interface HeroBillboardCarouselProps {
    title: string;
    description: string;
    background: HeroBillboardCarouselBackgroundProps;
    tag?: string;
    tagIcon?: LucideIcon;
    buttons?: ButtonConfig[];
    mediaItems: MediaItem[];
    ariaLabel?: string;
    className?: string;
    containerClassName?: string;
    textBoxClassName?: string;
    titleClassName?: string;
    descriptionClassName?: string;
    tagClassName?: string;
    buttonContainerClassName?: string;
    buttonClassName?: string;
    buttonTextClassName?: string;
    mediaWrapperClassName?: string;
}

const HeroBillboardCarousel = ({
    title,
    description,
    background,
    tag,
    tagIcon,
    buttons,
    mediaItems,
    ariaLabel = "Hero section",
    className = "",
    containerClassName = "",
    textBoxClassName = "",
    titleClassName = "",
    descriptionClassName = "",
    tagClassName = "",
    buttonContainerClassName = "",
    buttonClassName = "",
    buttonTextClassName = "",
    mediaWrapperClassName = "",
}: HeroBillboardCarouselProps) => {
    const renderCarouselItem = (item: MediaItem, index: number) => (
        <div
            key={index}
            className="w-full aspect-[4/5] overflow-hidden rounded-theme-capped card p-2 shadow-lg"
        >
            <MediaContent
                imageSrc={item.imageSrc}
                videoSrc={item.videoSrc}
                imageAlt={item.imageAlt || ""}
                videoAriaLabel={item.videoAriaLabel || "Carousel media"}
                imageClassName="z-1 h-full object-cover"
            />
        </div>
    );

    return (
        <section
            aria-label={ariaLabel}
            className={cls(
                "relative w-full py-hero-page-padding md:h-screen md:py-0 bg-gradient-to-r from-blue-500 to-purple-500",
                className
            )}
        >
            <HeroBackgrounds {...background} />
            <div className={cls(
                "mx-auto flex flex-col gap-14 md:gap-10 relative z-10",
                "w-full md:w-content-width md:h-full md:items-center md:justify-center",
                containerClassName
            )}>
                <TextBox
                    title={title}
                    description={description}
                    tag={tag}
                    tagIcon={tagIcon}
                    buttons={buttons}
                    className={cls(
                        "flex flex-col gap-3 md:gap-1 w-content-width mx-auto",
                        textBoxClassName
                    )}
                    titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
                    descriptionClassName={cls("text-base md:text-lg leading-[1.2]", descriptionClassName)}
                    tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
                    buttonContainerClassName={cls("flex flex-wrap gap-4 mt-3", buttonContainerClassName)}
                    buttonClassName={buttonClassName}
                    buttonTextClassName={buttonTextClassName}
                    center={true}
                />

                <div className={cls("w-full -mx-[var(--content-padding)]", mediaWrapperClassName)}>
                    <AutoCarousel
                        title=""
                        description=""
                        textboxLayout="default"
                        animationType="none"
                        className="py-0"
                        carouselClassName="py-0"
                        containerClassName="!w-full"
                        itemClassName="!w-55 md:!w-carousel-item-4"
                        ariaLabel="Hero carousel"
                        showTextBox={false}
                    >
                        {mediaItems?.map(renderCarouselItem)}
                    </AutoCarousel>
                </div>
            </div>
        </section>
    );
};

HeroBillboardCarousel.displayName = "HeroBillboardCarousel";

export default HeroBillboardCarousel;