import { Platform, StyleSheet } from 'react-native';
import { Colors } from './colors';
import { height, hp } from './constants';

export const globalStyles = StyleSheet.create({
  colCenter: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  colStart: {
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
  colBetween: {
    justifyContent: 'space-between',
  },
  rowCenter: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  rowBetween: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  rowBetweenNoCenter: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  rowAround: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  rowStart: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  rowEnd: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    alignSelf: 'flex-end',
  },
  undeline: {
    textDecorationStyle: 'solid',
    textDecorationLine: 'underline',
  },
  container: {
    flex: 1,
  },
  shadowProp: {
    shadowColor: Colors.shadowColor,
    shadowOffset: { width: -2, height: 4 },
    shadowOpacity: 0.2,
    shadowRadius: 3,
  },
  shadowElevation: {
    elevation: 5,
    shadowColor: Colors.shadowColor,
  },
  appContainer: {
    flex: 1,
    backgroundColor: Colors.white,
    paddingVertical: Platform.OS === 'ios' ? height / hp(22) : hp(24),
  },
});