import {Pressable, Text, View, Image} from "react-native";
import Chevron from '../assets/bi_chevron.svg'
import {useState} from "react";

const Accordion = ({title, children, ...props}) => {
    const [active, setActive] = useState(true)

    return (
        <View {...props}>
            <Pressable onPress={() => setActive(!active)}>
                <View style={{display: "flex", flexDirection: "row", alignItems: "center", marginBottom: 16 }}>
                    <Text style={{fontSize: 16, fontWeight: "bold", marginRight: 16, paddingTop: 16, paddingBottom: 16}}>{title}</Text>
                    <Chevron width={20} height={20} style={{transform: [{rotate: active ? '180deg' : '0deg'}]}}/>
                </View>
            </Pressable>

            <View style={
                {display: active ? 'flex' : 'none', flexDirection: 'column'}
            }>
                {children}
            </View>
        </View>
    )
}

export default Accordion;