import React, { forwardRef } from 'react';

import { Wrapper } from './styled';

type Props = {
  onBlur: () => void;
  onMouseDown: () => void;
  onMouseOver: () => void;
  onMouseOut: () => void;
  onKeyDown: (e: React.KeyboardEvent) => void;
  children: React.ReactNode;
};

type Ref = HTMLDivElement;

const index = forwardRef<Ref, Props>(({
  children,
  ...rest
}: Props, ref) => (
  <Wrapper
    ref={ref}
    tabIndex={0}
    role="button"
    onFocus={(): void => { console.log('focus'); }}
    {...rest}
  >
    {children}
  </Wrapper>
));

export default index;