import React, {useState} from 'react';
import Collapsible from 'react-native-collapsible';
import {Box, Actionable, Flexbox, Text, Icon} from '@evlop/native-components';

export default function FaqListItem(props: NativeAppBlockProps) {
  const {data = {}} = props;
  const faq = data.faq || {};
  const [show, setShow] = useState(false);

  return (
    <Box bg="gray-100" p="2xs" borderRadius={5}>
      <Actionable onPress={() => setShow(s => !s)}>
        <Flexbox flexDirection="row" justifyContent="space-between" alignItems="center">
          <Text fontSize="2xl" fontWeight="bold">{faq.question}</Text>
          <Icon size={24} icon={show ? 'entypo:chevron-down' : 'entypo:chevron-right'} />
        </Flexbox>
      </Actionable>
      <Collapsible collapsed={!show}>
        <Box mt={10}>
          <Text variant="body-md">{faq.answer}</Text>
        </Box>
      </Collapsible>
    </Box>
  );
}

{
  "faqs": [
    {
      "id": "1",
      "question": "Where is this located?",
      "answer": "This is a collapsible block, which can expand and collapse."
    },
    {
      "id": "2",
      "question": "What is that?",
      "answer": "This is a collapsible block, which can expand and collapse."
    },
    {
      "id": "3",
      "question": "What are the accepted payment methods?",
      "answer": "This is a collapsible block, which can expand and collapse."
    }
  ]
}