import styled from '@emotion/native';
import { FABInternal } from '../FAB';
import Box from '../../Box';

const StyledFABPairWrapper = styled(Box)({
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
});

const StyledFAB = styled(FABInternal)<{ iconOnly?: boolean; isLast?: boolean }>(
  ({ theme, iconOnly = false, isLast = false }) => ({
    height: theme.__hd__.fab.sizes.fabPairHeight,
    width: iconOnly ? theme.__hd__.fab.sizes.fabPairIconOnlyWidth : undefined,
    marginRight: isLast ? undefined : theme.__hd__.fab.space.fabPairMarginRight,
  })
);

export { StyledFABPairWrapper, StyledFAB };