import { ReactNode } from 'react'

import { useToggle } from 'hooks'
import { T9n } from 'features/T9n'

import { BlockTitle } from '../../styled'
import {
  Arrows,
  DropdownButton,
  SectionWrapper,
  Wrapper,
} from './styled'

type Props = {
  children: ReactNode,
  isOpen?: boolean,
  itemsCount: number,
  title?: string | number,
}

export const DropdownSection = ({
  children,
  isOpen: isOpenInitial,
  itemsCount,
  title,
}: Props) => {
  const {
    isOpen,
    toggle,
  } = useToggle(isOpenInitial)

  if (!title || itemsCount === 0) return null

  return (
    <Wrapper>
      <DropdownButton
        active={isOpen}
        onClick={toggle}
      >
        <BlockTitle>
          <T9n t={title} />
        </BlockTitle>
        <Arrows active={isOpen} />
      </DropdownButton>
      <SectionWrapper active={isOpen}>
        {children}
      </SectionWrapper>
    </Wrapper>
  )
}
