import {View} from "react-native";
import React, {ReactNode} from "react";
import {Card, Text} from "react-native-paper";
import {LucideIcon, LucideProps} from "lucide-react-native";

export function AMUIStatusAlert(props: { title: string, color: string, icon: LucideIcon, children?: ReactNode }) {
    return (
        <Card mode="outlined" style={{borderColor: props.color}}>
            <Card.Content>
                <View style={{alignItems: "center", flexDirection: "row", gap: 10}}>
                    {renderIconWithProps(props.icon, {size: 22, color: props.color})}
                    <Text variant="titleLarge" style={{color: props.color}}>{props.title}</Text>
                </View>
                {props.children}
            </Card.Content>
        </Card>  
    );
}

function renderIconWithProps(icon: LucideIcon, additionalProps: Partial<LucideProps>) {
    return React.cloneElement(React.createElement(icon), additionalProps);
}