import { StyleSheet } from "react-native";

const ModalStyles = StyleSheet.create({
   modalBgTransparant: { backgroundColor: 'rgba(0, 0, 0, 0.3)', flex: 1 },
   modalContent: {
      width: '100%',
      paddingBottom: 20,
      backgroundColor: 'white',
      borderTopRightRadius: 20,
      borderTopLeftRadius: 20,
      position: 'absolute',
      bottom: 0,
   },
   modalContentNew: {
      width: '100%',
      backgroundColor: 'white',
      borderTopRightRadius: 20,
      borderTopLeftRadius: 20,
      paddingTop: 5,
      paddingBottom: 5,
      paddingHorizontal: 20,
   },
   modalFloatContent: {
      backgroundColor: 'white',
      borderRadius: 20,
      paddingTop: 5,
      paddingBottom: 10,
      paddingHorizontal: 20,
   },
   titleContainer: {
      backgroundColor: 'white',
      borderTopRightRadius: 20,
      borderTopLeftRadius: 20,
      paddingHorizontal: 20,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingVertical: 10,
   },
   titleContainerNew: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingVertical: 10,
   },
   titleContainerModalFloat: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      paddingVertical: 10,
   },
   contentContainer: { height: '90%' },
   itemSelectModal: {
      padding: 10,
      flexDirection: 'row',
      justifyContent: 'space-between',
      borderBottomWidth: 1,
      alignItems: 'center',
   },
   modalOverlay: {
      flex: 1,
      backgroundColor: 'rgba(0, 0, 0, 0.6)',
      justifyContent: 'center',
      alignItems: 'center',
   },
   modalConfirmContainer: {
      width: '80%',
      borderRadius: 8,
      overflow: 'hidden',
      elevation: 2,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.25,
      shadowRadius: 3.84,
   },
   modalConfirmContent: { padding: 20, alignItems: 'center' },
   modalConfirmTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 8, textAlign: 'center' },
   modalConfirmMessage: { fontSize: 14, textAlign: 'center', lineHeight: 20 },
   modalConfirmDivider: { height: 1, width: '100%' },
   modalConfirmFooter: { flexDirection: 'row', height: 50 },
   modalConfirmButton: { flex: 1, justifyContent: 'center', alignItems: 'center' },
   modalConfirmButtonText: { fontSize: 16 },
   modalConfirmVerticalDivider: { width: 1, height: '100%' },
   modalUpdateContainer: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      paddingHorizontal: 30,
      overflow: 'hidden',
   },
   modalUpdateDecorativeCircle1: {
      position: 'absolute',
      width: 300,
      height: 300,
      borderRadius: 100,
      backgroundColor: 'rgba(255, 255, 255, 0.05)',
      top: -50,
      right: -50,
   },
   modalUpdateDecorativeCircle2: {
      position: 'absolute',
      width: 200,
      height: 200,
      borderRadius: 100,
      backgroundColor: 'rgba(255, 255, 255, 0.03)',
      bottom: -30,
      left: -30,
   },
   modalUpdateContent: { width: '100%', alignItems: 'flex-start', zIndex: 1 },
   modalUpdateLogo: { width: 200, height: 100, marginBottom: 40, alignSelf: 'center' },
   modalUpdateTextContainer: { marginBottom: 40 },
   modalUpdateTitle: { fontSize: 32, fontWeight: 'bold', color: 'white', marginBottom: 20, lineHeight: 38 },
   modalUpdateDescription: { fontSize: 16, color: 'white', lineHeight: 24 },
   modalUpdateButtonContainer: { width: '100%', alignItems: 'center' },
   modalUpdatePrimaryButton: {
      width: '100%',
      paddingVertical: 15,
      borderRadius: 12,
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: 15,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.2,
      shadowRadius: 4,
      elevation: 3,
   },
   modalUpdatePrimaryButtonText: { fontSize: 16, fontWeight: 'bold' },
   modalUpdateSecondaryButton: { paddingVertical: 10 },
   modalUpdateSecondaryButtonText: { fontSize: 16, color: 'white', fontWeight: '500' },
   headerModalViewImg: {
      paddingTop: 50,
      paddingHorizontal: 16,
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
   },
});

export default ModalStyles;