import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
import { Navigation } from 'swiper';
import Teaser, { TeaserProps } from '../Teaser';
import { classNamesTailwind } from '../../utils/theme';
import Heading, { HeadingProps } from '../Heading';
import Container from '../Container';

export interface TeasersProps {
    teasers: TeaserProps[];
    defaultTeaserProps?: Partial<TeaserProps>;
    swiperProps?: SwiperProps;
    heading: HeadingProps;
    className?: string;
    classNameButtonPrevious?: string;
    classNameButtonNext?: string;
    classNameHeader?: string;
}

const Teasers = ({
    teasers,
    defaultTeaserProps,
    swiperProps,
    className,
    classNameButtonPrevious,
    classNameButtonNext,
    classNameHeader,
    heading
}: TeasersProps) => {
    return (
        <Container className={className}>
            <div className={classNamesTailwind('flex justify-between mb-8', classNameHeader)}>
                <Heading {...heading} />
                <div>
                    <button
                        className={classNamesTailwind(
                            'prev relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50',
                            classNameButtonPrevious
                        )}
                    >
                        Vorige
                    </button>
                    <button
                        className={classNamesTailwind(
                            'next relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50',
                            classNameButtonNext
                        )}
                    >
                        Volgende
                    </button>
                </div>
            </div>
            <Swiper
                spaceBetween={32}
                slidesPerView={1}
                draggable
                navigation={{
                    enabled: true,
                    prevEl: '.prev',
                    nextEl: '.next'
                }}
                breakpoints={{
                    768: {
                        slidesPerView: 3
                    }
                }}
                modules={[Navigation]}
                {...swiperProps}
            >
                {teasers.map((teaser, index) => (
                    <SwiperSlide className="w-full" key={index}>
                        <Teaser {...defaultTeaserProps} {...teaser} />
                    </SwiperSlide>
                ))}
            </Swiper>
        </Container>
    );
};

export default Teasers;
