import { FluidContainer } from 'utils/styles/mixins';

import { MultiImageBegoniaListConfigSettings } from './multi-image-module-begonia-default.types'

const mobileMediumSliderConfig = [
  {
    breakpoint: 900,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      rows: 1,
      centerMode: true,
      centerPadding: '90px',
      arrows: false
    }
  },
  {
    breakpoint: 540,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      centerMode: true,
      centerPadding: '40px'
    }
  }
];

export const SliderConfig: MultiImageBegoniaListConfigSettings = {
  wrapper: FluidContainer,
  setArrowOffset: false,
  flexWrap: 'nowrap',
  slider: {
    arrows: false,
    rows: 1,
    slidesToShow: 1,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 660,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      },
      ...mobileMediumSliderConfig
    ]
  }
}