import React from 'react';
import {Box, Button, Collapse, Fade, useDisclosure} from "@chakra-ui/react";
import {ArrowDownIcon, ArrowUpIcon} from "@chakra-ui/icons";

const CollapseItem = ({title, text}) => {
    const { isOpen, onToggle } = useDisclosure()

    return (
        <div  onClick={onToggle} className={'mt-2 cursor-pointer'}>
            <div style={{ border: '1px solid #39a2a5' }} className={'flex p-2 rounded-5 align-items-center justify-content-between'}>
                {isOpen ? (
                    <ArrowUpIcon />
                ): (
                    <ArrowDownIcon />
                )}
                <strong dir={'rtl'} className={'bk-light'} > {title} </strong>
            </div>
            <Collapse in={isOpen}>
                <Box
                    p='40px'
                    color='black'
                    mt='4'
                    bg='gray.200'
                    rounded='md'
                    shadow='md'
                >
                    <p dir={'rtl'} className={'bk-light'}>
                        {text}
                    </p>
                </Box>
            </Collapse>
        </div>
    );
};

export default CollapseItem;