import React, { useState, useEffect } from 'react';

import { Container, Label, ContentWrapper, Content } from './styled';

type Props = {
  label: React.ReactNode;
  children?: React.ReactNode;
  isActive?: boolean;
  showBottomBorder?: boolean;
};

const Collapse: React.FC<Props> = ({
  label = '',
  children = '',
  isActive = false,
  showBottomBorder = false,
}: Props) => {
  const [isCollapse, setCollapse] = useState(true);

  useEffect(() => {
    setCollapse(!isActive);
  }, [isActive]);

  return (
    <Container showBottomBorder={isActive && showBottomBorder}>
      <Label>{label}</Label>
      {children ? (
        <ContentWrapper isCollapse={isCollapse}>
          <Content>{children}</Content>
        </ContentWrapper>
      ) : null}
    </Container>
  );
};

export default Collapse;