"use client";

import React from 'react';
import { Carousel } from './carousel';
import { ChevronLeft, ChevronRight } from '@untitledui/icons';

interface CarouselSectionWrapperProps {
    title: string;
    subtitle?: string;
    hasItems: boolean;
    children: React.ReactNode;
    emptyMessage?: string;
}

export const CarouselSectionWrapper = ({
    title,
    subtitle,
    hasItems,
    children,
    emptyMessage = "No items available",
}: CarouselSectionWrapperProps) => {
    return (
        <section>
            <div className="mx-auto max-w-container px-4 md:px-8">
                {hasItems ? (
                    <Carousel.Root opts={{ align: "start", loop: true }}>
                        <div className="flex items-center justify-between mb-12">
                            <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
                                {title}
                            </h2>
                            <div className="flex gap-2">
                                <Carousel.PrevTrigger className="rounded-full p-2 border border-secondary hover:bg-primary_hover transition-colors disabled:opacity-30 disabled:cursor-not-allowed">
                                    <ChevronLeft className="w-6 h-6 text-fg-primary" />
                                </Carousel.PrevTrigger>
                                <Carousel.NextTrigger className="rounded-full p-2 border border-secondary hover:bg-primary_hover transition-colors disabled:opacity-30 disabled:cursor-not-allowed">
                                    <ChevronRight className="w-6 h-6 text-fg-primary" />
                                </Carousel.NextTrigger>
                            </div>
                        </div>
                        
                        <Carousel.Content className="-ml-4">
                            {children}
                        </Carousel.Content>
                    </Carousel.Root>
                ) : (
                    <>
                        <div className="mb-12">
                            <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
                                {title}
                            </h2>
                            {subtitle && (
                                <p className="mt-4 text-lg text-tertiary md:mt-6 md:text-xl">
                                    {subtitle}
                                </p>
                            )}
                        </div>
                        <div className="text-center py-12">
                            <p className="font-body text-base text-tertiary">{emptyMessage}</p>
                        </div>
                    </>
                )}
            </div>
        </section>
    );
};
