import { View } from 'react-native';
import styled from '@emotion/native';
import Typography from '../../Typography';

type ThemeVariant = 'light' | 'dark';

const StyledWrapper = styled(View)(({ theme }) => ({
  display: 'flex',
  flex: 1,
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  padding: theme.__hd__.empty.space.wrapperPadding,
}));

const StyledTitle = styled(Typography.Title)<{ themeVariant: ThemeVariant }>(
  ({ theme, themeVariant }) => ({
    textAlign: 'center',
    marginBottom: theme.__hd__.empty.space.titleMargin,
    color:
      themeVariant === 'dark'
        ? theme.__hd__.empty.colors.invertedText
        : theme.__hd__.empty.colors.text,
  })
);

const StyledDescription = styled(Typography.Body)<{
  themeVariant: ThemeVariant;
}>(({ theme, themeVariant }) => ({
  textAlign: 'center',
  color:
    themeVariant === 'dark'
      ? theme.__hd__.empty.colors.invertedSubduedText
      : theme.__hd__.empty.colors.subduedText,
}));

const StyledEmptyImageContainer = styled(View)(({ theme }) => ({
  marginBottom: theme.__hd__.empty.space.imageMargin,
}));

export {
  StyledWrapper,
  StyledTitle,
  StyledDescription,
  StyledEmptyImageContainer,
};