import styled from '@emotion/native';
import { TouchableOpacity, View } from 'react-native';
import type { ComponentProps } from 'react';

const StyledContainer = styled(View)({
  alignItems: 'center',
  flexDirection: 'row',
});

const StyledContentContainer = styled(View)<{ themeHighlighted: boolean }>(
  ({ theme, themeHighlighted }) => ({
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: themeHighlighted
      ? theme.__hd__.attachment.colors.highlightedBackground
      : undefined,
    borderRadius: themeHighlighted
      ? theme.__hd__.attachment.radii.container
      : undefined,
    padding: theme.__hd__.attachment.space.containerPadding,
  })
);

const StyledTextContainer = styled(View)(({ theme }) => ({
  paddingHorizontal: theme.__hd__.attachment.space.textHorizontalPadding,
  flexDirection: 'row',
  flex: 1,
  flexWrap: 'wrap',
}));

const StyledCTAWrapper = styled(TouchableOpacity)<
  ComponentProps<typeof TouchableOpacity>
>(({ theme }) => ({
  padding: theme.__hd__.attachment.space.ctaPadding,
  justifyContent: 'center',
}));

export {
  StyledContainer,
  StyledContentContainer,
  StyledCTAWrapper,
  StyledTextContainer,
};