'use client';

import { forwardRef } from 'react';
import 'react-multi-carousel/lib/styles.css';
import Carousel, {
  CarouselProps as BaseCarouselProps
} from 'react-multi-carousel';
import { useMediaQuery } from '@akinon/next/hooks';

type ContainerAspectRatioType = {
  mobile: number;
  desktop: number;
};

interface CarouselProps extends BaseCarouselProps {
  containerAspectRatio: ContainerAspectRatioType;
}

const CarouselCore = forwardRef<Carousel, CarouselProps>((props, ref) => {
  const { containerAspectRatio } = props;
  const matches = useMediaQuery('(min-width: 768px)');
  const aspectRatio = matches
    ? containerAspectRatio.desktop
    : containerAspectRatio.mobile;

  return (
    <div className="w-full" style={{ aspectRatio }}>
      <Carousel {...props} ref={ref} />
    </div>
  );
});

CarouselCore.displayName = 'CarouselCore';

export { CarouselCore };