import { View } from 'react-native';
import styled from '@emotion/native';
import type { InlineLoaderTextSizeName } from './types';

type ThemeSize = InlineLoaderTextSizeName;

const StyledContainer = styled(View)(({ theme }) => ({
  flexDirection: 'row',
  alignItems: 'flex-start',
  gap: theme.__hd__.inlineLoader.space.gap,
}));

const StyledIconContainer = styled(View)<{
  themeSize: ThemeSize;
}>(({ themeSize, theme }) => ({
  height: theme.__hd__.inlineLoader.icon.lineHeights[themeSize],
  justifyContent: 'center',
}));

export { StyledContainer, StyledIconContainer };