import {StyleSheet} from 'react-native';
import {BORDER_RADIUS, SPACING} from '@shared/theme';
import {windowDimensions} from '@shared/constants';

const SKELETON_CONTAINER_WIDTH = windowDimensions.width - SPACING.x4;
export const SKELETON_WIDTH = SKELETON_CONTAINER_WIDTH - SPACING.x3;
export const styles = StyleSheet.create({
  container: {flexGrow: 1},
  content: {flexGrow: 1},
  listContainer: {flexGrow: 1},
  listHeader: {
    alignItems: 'center',
    borderTopWidth: 1,
    flexDirection: 'row',
    gap: SPACING['x0.5'],
    marginBottom: SPACING.x1,
    paddingLeft: SPACING.x2 + SPACING['x1.5'],
    paddingTop: SPACING.x3,
  },
  spinnerWrapper: {
    alignItems: 'center',
    alignSelf: 'center',
    height: '100%',
    justifyContent: 'center',
    position: 'absolute',
    width: '100%',
  },
  skeletonContainer: {
    alignItems: 'center',
    alignSelf: 'center',
    borderWidth: 1,
    justifyContent: 'center',
    paddingHorizontal: SPACING['x1.5'],
    paddingVertical: SPACING.x3,
    width: SKELETON_CONTAINER_WIDTH,
  },
  skeletonContainerNoData: {borderRadius: BORDER_RADIUS.l},
  skeletonContainerData: {
    borderBottomLeftRadius: BORDER_RADIUS.l,
    borderBottomRightRadius: BORDER_RADIUS.l,
  },
  divider: {marginHorizontal: SPACING.x2},
  noInternetContainer: {
    marginHorizontal: SPACING.x2,
    marginTop: SPACING.x3,
  },
});
