import { CSSProperties, ReactNode } from 'react'
import classNames from 'classnames'
import { CommonComponentProps } from '../../utils/types'
import './Dropdown.scss'

import { DropdownItem } from './DropdownItem'
import { DropdownOption } from './DropdownOption'

export * from './DropdownItem'
export * from './DropdownOption'

export interface DropdownProps extends CommonComponentProps {
  className?: string
  style?: CSSProperties
  children?: ReactNode
}

export function Dropdown(props: DropdownProps) {
  const { className, children, ...restProps } = props

  const dropdownClass = classNames('s-dropdown', className)

  return (
    <div {...restProps} className={dropdownClass}>
      {children}
    </div>
  )
}

Dropdown.Item = DropdownItem
Dropdown.Option = DropdownOption

export default Dropdown