import React, { ReactNode } from 'react';
import { View } from 'react-native';
import useThemeStyles from '@hooks/useThemeStyles';
import Button from './Button';
import Modal from './Modal';
import Header from './Header';
import RenderHTML from './RenderHTML';
import CONST from '@src/CONST';

type DecisionModalProps = {
    children: ReactNode;
    isSmallScreenWidth: boolean;
    isVisible: boolean;
    onClose: () => void;
};

function DecisionModal({ children, isSmallScreenWidth, isVisible, onClose }: DecisionModalProps) {
    const styles = useThemeStyles();
    return (
        <Modal
            onClose={onClose}
            isVisible={isVisible}
            type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM}
            innerContainerStyle={styles.pv0}
        >
            <View style={styles.m5}>{children}</View>
        </Modal>
    );
}

function DecisionModalHeader({ title }: { title: string }) {
    const styles = useThemeStyles();
    return (
        <View style={[styles.flexRow, styles.mb5]}>
            <Header title={title} containerStyles={styles.alignItemsCenter} />
        </View>
    );
}

function DecisionModalContent({ html }: { html: string }) {
    return <RenderHTML html={html} />;
}

function DecisionModalFooter({ children }: { children: ReactNode }) {
    const styles = useThemeStyles();
    return <View style={styles.mt5}>{children}</View>;
}

// Attach sub-components
DecisionModal.Header = DecisionModalHeader;
DecisionModal.Content = DecisionModalContent;
DecisionModal.Footer = DecisionModalFooter;

export default DecisionModal;

<DecisionModal 
    isVisible={isVisible} 
    onClose={onClose} 
    isSmallScreenWidth={isSmallScreenWidth}
>
    <DecisionModal.Header title="Delete Message?" />
    
    <DecisionModal.Content html="Are you sure you want to delete this? This action cannot be undone." />

    <DecisionModal.Footer>
        <Button
            variant="success"
            large
            text="Confirm"
            onPress={handleConfirm}
        />
        <Button
            variant="danger"
            large
            style={styles.mt3}
            text="Delete"
            onPress={handleDelete}
        />
    </DecisionModal.Footer>
</DecisionModal>

<Header
    title={title}
    containerStyles={styles.alignItemsCenter}
/>
```\n\n---\n\nPlease rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.