import React from 'react';
import type { ReactElement } from 'react';
import type { StyleProp, ViewStyle } from 'react-native';
import {
  StyledCollapse,
  StyledHeaderWrapper,
  StyledItemWrapper,
} from './StyledAccordion';
import Typography from '../Typography';
import Icon from '../Icon';
import type { Variant } from './StyledAccordion';

type AccordionItemProps = {
  header: string | ReactElement;
  content: ReactElement;
  open?: boolean;
  onPress?: () => void;
  variant?: Variant;
  style?: StyleProp<ViewStyle>;
  testID?: string;
};

const AccordionItem = ({
  header,
  content,
  open = false,
  onPress,
  variant = 'default',
  style,
  testID,
}: AccordionItemProps) => (
  <StyledItemWrapper themeVariant={variant} style={style} testID={testID}>
    <StyledHeaderWrapper onPress={onPress}>
      {typeof header === 'string' ? (
        <Typography.Body variant="regular-bold">{header}</Typography.Body>
      ) : (
        header
      )}
      <Icon
        icon={open ? 'arrow-up' : 'arrow-down'}
        intent="primary"
        size="small"
      />
    </StyledHeaderWrapper>
    <StyledCollapse open={open}>{content}</StyledCollapse>
  </StyledItemWrapper>
);

export default AccordionItem;