import styled from '@emotion/native';
import type { ViewProps } from 'react-native';
import { View } from 'react-native';
import type { CardProps } from '../Card';
import Card from '../Card';
import type { PageControlProps } from '../PageControl';
import PageControl from '../PageControl';

const StyledPageControl = styled(PageControl)<PageControlProps>(
  ({ theme }) => ({
    alignSelf: 'center',
    marginTop: theme.__hd__.cardCarousel.space.pageControlMarginTop,
  })
);

const StyledWrapper = styled(View)<ViewProps>({});

const StyledCard = styled(Card)<CardProps>(({ theme }) => ({
  borderRadius: theme.__hd__.cardCarousel.radii.card,
  overflow: 'hidden',
  flex: 1,
}));

const StyledItemWrapper = styled(View)<
  ViewProps & {
    themeGap: 'xsmall' | 'small' | 'medium';
  }
>(({ theme, themeGap }) => ({
  padding: theme.__hd__.cardCarousel.space.carouselItemSpacing[themeGap],
}));

export { StyledCard, StyledItemWrapper, StyledWrapper, StyledPageControl };