import {StyleSheet, Text, View} from "react-native";
import FullWidthImage from "react-native-fullwidth-image";
import {Button, ButtonTray} from "../../UI/Button";
import Icons from "../../UI/Icons.js"

const ModuleView = ({module, onDelete}) => {
    //   Initialisation -------------
    //   State ----------------------
    //   Handlers -------------------

    const handleDelete = () => onDelete(module);

    //   View -----------------------

    return (<View style={styles.container}>
        <FullWidthImage source={{uri: module.ModuleImage}} style={styles.image}/>

        <View style={styles.infoTray}>
            <Text style={styles.boldText}>View {module.ModuleCode} {module.ModuleName}</Text>
            <Text style={styles.text}>Level {module.ModuleLevel}</Text>
            <Text style={styles.Text}>
                {module.ModuleLeaderName} <Text style={styles.dimText}>(Module Leader)</Text>
            </Text>
        </View>

        <ButtonTray>
            <Button icon={<Icons.Edit/>} label={"Modify"}/>
            <Button
                icon={<Icons.Delete/>}
                label={"Delete"}
                styleButton={{backgroundColor: 'mistyrose'}}
                styleLabel={{color: 'red'}}
                onClick={handleDelete}
            />
        </ButtonTray>

    </View>);
};


const styles = StyleSheet.create({
    container: {
        gap: 15,
    }, infoTray: {
        gap: 5,
    }, image: {
        borderRadius: 3,
    }, text: {
        fontSize: 16,
    }, boldText: {
        fontSize: 16, fontWeight: 'bold',
    }, dimText: {
        color: "grey",
    }

});

export default ModuleView;