import { StyleSheet } from 'react-native';
import { Colors } from 'src/theme';

export const styles = StyleSheet.create({
  alignCenter: { alignItems: 'center', justifyContent: 'center', textAlign: 'center' },
  tripItemContainer: {
    paddingHorizontal: 16,
    paddingTop: 16,
    paddingBottom: 4,
    marginVertical: 8,
    backgroundColor: Colors.FILL_LIGHT,
    borderRadius: 8
  },
  tripHeaderContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 16
  },
  tripDateContainer: {
    flexDirection: 'row',
    gap: 4,
    alignItems: 'center'
  },
  tripDateText: {
    fontSize: 14,
    fontWeight: 'bold',
    color: Colors.DARK_BLUE
  },
  editButton: {
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 6,
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderWidth: 1,
    borderColor: Colors.BORDER_LIGHT,
    gap: 6
  },
  editButtonText: {
    fontSize: 13,
    color: Colors.DARK_BLUE,
    fontWeight: 'bold'
  },
  divider: {
    height: 1,
    backgroundColor: Colors.DARK_LIGHT,
    marginBottom: 16
  },
  descriptionTitle: {
    fontSize: 12,
    fontWeight: '600',
    color: Colors.DARK_BLUE,
    marginBottom: 8
  },
  descriptionText: {
    fontSize: 12,
    fontWeight: '500',
    color: Colors.DARK_BLUE,
    paddingHorizontal: 8,
    marginBottom: 16
  },
  visitedRegionsTitle: {
    fontSize: 12,
    fontWeight: '600',
    color: Colors.DARK_BLUE,
    marginBottom: 8
  },
  regionsScrollView: {
    maxHeight: 200,
    paddingHorizontal: 8
  },
  regionItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12
  },
  flagIcon: {
    width: 24,
    height: 24,
    resizeMode: 'cover',
    borderWidth: 0.5,
    borderRadius: 12,
    borderColor: '#B4C2C7'
  },
  nameContainer: {
    marginLeft: 12,
    flexShrink: 1
  },
  regionName: {
    fontSize: 14,
    fontWeight: 'bold',
    color: Colors.DARK_BLUE
  },
  regionSubname: {
    fontSize: 12,
    fontWeight: '500',
    color: Colors.DARK_BLUE
  }
});