import React from 'react';
import { ItemContainer } from './styles';
import { CarouselItemProps } from './types';

export const CarouselItem: React.FC<CarouselItemProps> = ({
  children,
  widthItemConfig = {
    xs: '85%',
    mobile: '85%',
    tablet: '70%',
    desktop: 'calc(50% - 10px)',
    xl: 'calc(50% - 10px)'
  },
  maxWidthItemConfig,
  className
}) => {
  return (
    <ItemContainer
      widthItemConfig={widthItemConfig}
      maxWidthItemConfig={maxWidthItemConfig}
      className={className}
    >
      {children}
    </ItemContainer>
  );
};