import React from 'react'
import { Collapse as ReactCollapse } from 'react-collapse'
import {reducedMotionEnabled} from '../libs/accessibility'


type CollapseProps = {
  isActive: boolean
  children: React.ReactElement
};


export default class Collapse extends React.Component<CollapseProps> {
  static defaultProps = {
    isActive: true
  }

  render() {
    if (reducedMotionEnabled()) {
      return (
        <div style={{display: this.props.isActive ? "block" : "none"}}>
          {this.props.children}
        </div>
      )
    }
    else {
      return (
        <ReactCollapse isOpened={this.props.isActive}>
          {this.props.children}
        </ReactCollapse>
      )
    }
  }
}