import styled from 'styled-components/native';

interface IStylesProps {
  // transform?: string;
}

export const SlideshowContainer = styled.View`
  position: relative;
`;

export const SlidesToShowContainer = styled.View`
  overflow: hidden;
  
`;

export const SlideshowInner = styled.View`
  height: 100%;
  display: flex;
  flex-direction: row;
`;

export const SlideshowIndicators = styled.View<{ width: string }>`
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 10px;
  width: ${(props) => props.width};
  
`;

export const Indicator = styled.View<{ activeItem: string }>`
  
  width: 8px;
  height: 8px;
  border-radius: 50;
  border-width: 1px;
  border-style: solid;
  border-color: #d0d0d0;
  background-color: ${(props) => props.activeItem};
  margin: 0px 10px;
  &:hover {
    cursor: pointer;
  }
`;

export const ArrowContainer = styled.View`
  position: absolute;
  z-index: 10;
  top: 45%;
  padding: 0.5%;
  background: rgba(243, 248, 250, 0.2);
  border-radius: 50;
  display: flex;
`;

export const LeftArrowContainer = styled(ArrowContainer)`
  left: 0;
`;

export const RightArrowContainer = styled(ArrowContainer)`
  right: 0;
`;



