import styled from "styled-components";
import React from "react";
import { primaryColor } from "../../config";
import { elementProps } from "../generator";

const MI = styled.span<{ active: boolean, inverted: boolean | undefined, fullWidth: boolean | undefined  }>`
  ${(props) => `
    cursor : pointer;
    padding: .3em .5em;
    font-size: 1.05em;
    text-transform: capitalize;
    transition: 400ms ease-out;
    color: ${primaryColor};
    ${props.fullWidth? 'width: 100%;' : ''}
    border-radius: ${props.fullWidth? 0 : '1.5em'}; 
    font-weight: bold;
    ${props.active &&`
        border-radius: ${props.fullWidth? 0 :'.6em'};
        box-shadow: 0 .13em .2em rgba(0,0,0,.5);
        background: ${props.inverted ? "white" : primaryColor}; color: ${
            props.inverted ? primaryColor : "white"
        }`
    }`}
`;

export const MenuItem = (props: any) => {
  return (
    <MI {...elementProps(props)} {...props}>
      {props.children}
    </MI>
  );
};

export default MenuItem;