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

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    position: 'relative'
  },
  chevronWrapper: {
    width: 42,
    height: 42,
    borderRadius: 21,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.3)'
  },
  backButton: {
    position: 'absolute',
    width: 50,
    height: 50,
    top: 50,
    left: 10,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 2
  },
  emptyImage: {
    height: 220,
    width: '100%',
    backgroundColor: Colors.FILL_LIGHT,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 16,
    paddingTop: 24,
    shadowColor: '#00000026',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.15,
    shadowRadius: 8,
    elevation: 8
  },
  emptyImageText: { fontWeight: '600', color: '#808080', fontSize: 12 },
  imageFooter: { paddingBottom: 50, paddingHorizontal: 16, gap: 16 },
  imageDescription: { color: Colors.WHITE, textAlign: 'center', fontWeight: '600' },
  imageOwner: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 4,
    backgroundColor: 'rgba(255, 255, 255, 0.8)',
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderRadius: 8,
    alignSelf: 'center'
  },
  imageOwnerText: { color: Colors.DARK_BLUE, fontFamily: 'montserrat-700' },
  wrapper: {
    marginLeft: '5%',
    marginRight: '5%',
    gap: 16
  },
  divider: {
    height: 1,
    width: '100%',
    backgroundColor: Colors.DARK_LIGHT
  },
  nameContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 16
  },
  title: {
    fontSize: 18,
    fontFamily: 'montserrat-700',
    color: Colors.DARK_BLUE,
    flex: 1
  },
  subtitle: {
    fontSize: 12,
    fontWeight: '600',
    color: Colors.DARK_BLUE
  },
  stats: {
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  icon: {
    width: 28,
    height: 28,
    borderRadius: 14,
    backgroundColor: Colors.DARK_BLUE,
    alignItems: 'center',
    justifyContent: 'center'
  },
  statItem: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
    flex: 1
  },
  statText: {
    fontSize: 14,
    color: 'gray'
  },
  statNumber: {
    fontSize: 16,
    fontWeight: 'bold'
  },
  travelSeriesTitle: {
    fontSize: 14,
    fontFamily: 'montserrat-700',
    textTransform: 'uppercase',
    color: Colors.DARK_BLUE
  },
  userImageContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4
  },
  userImage: {
    width: 28,
    height: 28,
    borderRadius: 14,
    borderWidth: 1,
    borderColor: Colors.DARK_LIGHT,
    resizeMode: 'cover'
  },
  userCountContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    width: 28,
    height: 28,
    borderRadius: 14,
    backgroundColor: Colors.DARK_LIGHT,
    marginLeft: -10,
    gap: 2
  },
  userCount: {
    fontSize: 12,
    color: Colors.DARK_BLUE,
    lineHeight: 24
  },
  dots: {
    width: 3,
    height: 3,
    borderRadius: 3 / 2,
    backgroundColor: Colors.DARK_BLUE
  },
  modalView: {
    paddingHorizontal: 8,
    paddingVertical: 24,
    alignItems: 'center'
  },
  infoTitle: {
    color: Colors.DARK_BLUE,
    fontSize: 16,
    fontWeight: '700',
    textAlign: 'center',
    marginBottom: 16
  },
  infoText: {
    color: Colors.DARK_BLUE,
    fontSize: 14,
    fontWeight: '400',
    textAlign: 'left',
    marginBottom: 24
  },
  btnContainer: {
    borderColor: Colors.DARK_BLUE,
    backgroundColor: Colors.WHITE,
    width: '60%'
  },
  infoContent: { flexDirection: 'row', alignItems: 'center', gap: 4 },
  visitedButtonText: {
    color: Colors.DARK_BLUE,
    fontWeight: 'bold',
    fontSize: 13
  },
  durationContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    gap: 12
  },
  durationItem: {
    alignItems: 'center',
    justifyContent: 'center',
    gap: 4
  },
  durationIconActive: {
    backgroundColor: Colors.WHITE
  },
  durationIconInactive: {
    backgroundColor: Colors.LIGHT_GRAY
  },
  visitDuration: {
    color: Colors.DARK_BLUE,
    fontWeight: '600',
    fontSize: getFontSize(11)
  },
  goToMapBtn: {
    position: 'absolute',
    width: 50,
    height: 50,
    top: 50,
    right: 10,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 2
  },
  addPhotoButton: {
    position: 'absolute',
    width: 50,
    height: 50,
    top: 160,
    right: 10,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 2
  }
});
