import React from 'react';
import styled from 'styled-components';

interface Props {
  backgroundColor?: string;
  children: React.ReactNode;
  textColor?: string;
}

interface Style {
  backgroundColor?: string;
  textColor?: string;
}

const DrawerItem = ({ backgroundColor = '#fff', children, textColor = '#000' }: Props) => {
  return (
    <Item
      data-test="component-drawerItem"
      className="nwc--drawer-item font--16"
      style={{
        background: backgroundColor,
        color: textColor,
      }}
    >
      {children}
    </Item>
  );
};

export default DrawerItem;

/* styles */
const Item = styled.span<Style>`
  background: ${({ backgroundColor }) => backgroundColor};
  color: ${({ color }) => color};
  line-height: 50px;
  padding: 0 10px;
  display: block;
  font-size: 16px;

  a {
    text-decoration: none;
    border-bottom: none;
  }
`;