// import the styles
import {
  Root,
  Item,
  Header,
  Trigger,
  Content,
  Icon,
  TitleText,
  ContentText,
} from '../components/core/accordion/styled-components';

// import the createAccordion function
import { createAccordion } from '@gluestack-ui/accordion';

// Understanding the API
const Accordion = createAccordion({
  Root,
  Item,
  Header,
  Trigger,
  Content,
  Icon,
  TitleText,
  ContentText,
});

// Using the Accordion component
export default () => (
  <Accordion>
    <AccordionItem value="a">
      <AccordionHeader>
        <AccordionTrigger>
          {({ isExpanded }: { isExpanded: boolean }) => {
            return (
              <>
                <AccordionTitleText>
                  How do I place an order?
                </AccordionTitleText>
                {isExpanded ? (
                  // ChevronUpIcon is imported from 'lucide-react-native'
                  <AccordionIcon as={ChevronUpIcon} />
                ) : (
                  // ChevronDownIcon is imported from 'lucide-react-native'
                  <AccordionIcon as={ChevronDownIcon} />
                )}
              </>
            );
          }}
        </AccordionTrigger>
      </AccordionHeader>
      <AccordionContent>
        <AccordionContentText>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        </AccordionContentText>
      </AccordionContent>
    </AccordionItem>
  </Accordion>
);