import * as React from 'react'
import * as cx from 'classnames'
import { TrayProps } from '../interfaces'
import { Flex, Row } from '../../flex'

const styles = require('../../../../src/components/tray/web/tray.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)
    }
}