import { TouchableOpacity } from 'react-native';
import styled from '@emotion/native';
import type { TouchableOpacityProps } from 'react-native';
import Typography from '../../Typography';
import Icon from '../../Icon';
import type { IconProps } from '../../Icon';

const StyledActionItem = styled(TouchableOpacity)(({ theme }) => ({
  padding: theme.__hd__.fab.space.actionItemPadding,
  margin: theme.__hd__.fab.space.actionItemMargin,
  marginRight: theme.__hd__.fab.space.actionItemMarginRight,
  backgroundColor: theme.__hd__.fab.colors.actionItemBackground,
  borderRadius: theme.__hd__.fab.radii.actionItem,
  flexDirection: 'row',
  alignItems: 'center',
  alignSelf: 'flex-end',
  overflow: 'hidden',
}));

const StyledActionItemText = styled(Typography.Body)<TouchableOpacityProps>(
  ({ theme }) => ({
    color: theme.__hd__.fab.colors.actionItemText,
  })
);

const StyledIcon = styled(Icon)<IconProps>(({ theme }) => ({
  color: theme.__hd__.fab.colors.actionItemText,
}));

export { StyledIcon, StyledActionItem, StyledActionItemText };