import { StyleSheet, Platform } from 'react-native';
import { Colors } from '../../../../theme';

export const styles = StyleSheet.create({
  markerContainer: {
    width: 30,
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: Colors.WHITE,
    borderRadius: 15,
    borderWidth: 2,
    borderColor: Colors.TEXT_GRAY
  },
  icon: {
    width: 20,
    height: 20
  },
  customView: {
    width: 200,
    backgroundColor: 'white',
    borderRadius: 8,
    shadowColor: '#212529',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.12,
    shadowRadius: 8,
    elevation: 5
  },
  calloutContainer: {
    alignItems: 'center',
    paddingVertical: 15,
    paddingHorizontal: 10
  },
  calloutImageContainer: {
    width: 38,
    height: 38,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: Colors.WHITE,
    borderRadius: 19,
    borderWidth: 2,
    borderColor: Colors.TEXT_GRAY,
    marginTop: Platform.OS === 'ios' ? -34 : -4
  },
  calloutImage: {
    width: 32,
    height: 32
  },
  calloutTextContainer: {
    flex: 1,
    gap: 4,
    alignItems: 'center',
    marginVertical: 10
  },
  seriesName: {
    fontSize: 13,
    fontWeight: 'bold',
    color: Colors.DARK_BLUE,
    textAlign: 'center'
  },
  markerName: {
    fontSize: 12,
    color: Colors.DARK_BLUE,
    textAlign: 'center'
  },
  calloutButton: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    backgroundColor: Colors.ORANGE,
    borderRadius: 6,
    height: 30,
    alignItems: 'center',
    justifyContent: 'center'
  },
  calloutButtonText: {
    color: 'white',
    fontSize: 12,
    fontWeight: 'bold'
  },
  completedContainer: { flexDirection: 'row', alignItems: 'center', gap: 6 },
  customCallout: {
    width: 200,
    backgroundColor: Colors.WHITE,
    shadowColor: '#212529',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.12,
    shadowRadius: 8,
    elevation: 5
  }
});