import * as React from 'react'
import * as cx from 'classnames'

import { TrayProps } from '../interfaces'

import { Flex } from './flex'
import { Row } from './row'

const styles = require('../../src/styles/components/tray.scss')
const itemStyles = require('../../src/styles/components/tray-item.scss')

export class Tray extends Flex<TrayProps>  {
    public static defaultProps: Partial<TrayProps> = {
        ...Row.defaultProps,
        fullWidth: true,
    }

    public render(): JSX.Element {
        const {
            style,
            children,
            onClick,
            id,
        } = this.props;

        return (
            <menu
                id={id}
                className={this.classNames()}
                style={style}
                onClick={onClick}>
                {children}
            </menu>
        )
    }

    protected classNames(): string {
        return cx(super.classNames(), styles.container)
    }
}