import { StyleSheet, Dimensions } from 'react-native';
import { Colors } from '../../../../theme';
import { getFontSize } from 'src/utils';

export const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 10,
    paddingHorizontal: 16,
    justifyContent: 'space-between',
    flex: 1
  },
  headerText: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#0F3F4F',
    flexShrink: 1,
    marginRight: 10
  },
  headerImage: {
    width: 30,
    height: 30,
    marginRight: 16,
    resizeMode: 'contain',
    borderRadius: 15,
    borderColor: '#B4C2C7',
    borderWidth: 0.5
  },
  contentText: {
    fontSize: 13,
    color: '#0F3F4F',
    textAlign: 'left',
    marginLeft: 10,
    flexShrink: 1,
    marginRight: 10
  },
  headerIcon: {
    transform: [{ rotate: '-90deg' }]
  },
  itemIcon: {
    width: 20,
    height: 20,
    marginLeft: 10,
    resizeMode: 'contain'
  },
  rotate: {
    transform: [{ rotate: '90deg' }]
  },
  content: {
    padding: 6,
    paddingBottom: 4,
    backgroundColor: '#FAFAFA',
    borderRadius: 8,
  },
  sectionContainer: {
    backgroundColor: Colors.FILL_LIGHT,
    borderRadius: 8
  },
  headerContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1
  },
  chevronContainer: {
    width: 18,
    height: 18,
    alignItems: 'center'
  },
  itemContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    flex: 1
  },
  info: {
    paddingHorizontal: 10,
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center'
  }
});
