import { Grid, MenuItem, Text } from "../../";
import React from 'react';


const Switch = ({ onClick, active, items, style } : any)=>(
    <Grid padding=".5em" style={style}>
    <div
      className="shadow noselect"
      style={{
        background: "#CDF7E0",
        padding: ".2em",
        borderRadius: "1.5em",
      }}
    >
      {items.map((item: string) => (
        <MenuItem
          key={item}
          style={{ borderRadius: "1.5em" }}
          active={active === item}
          onClick={() => onClick(item)}
        >
          {item.charAt(0).toUpperCase() +
           item.substring(1).toLowerCase().replace(/_/g, " ")}
        </MenuItem>
      ))}
    </div>
  </Grid>
  );

  Switch.underlined = ({ onClick, active, items, style } : any)=>(
    <Grid padding=".5em" style={style}   className="noselect" cols='3'  mobileLayout={false}>
      {items.map((item: string) => (
        <Text
          bold
          color='white'
          key={item}
          width='100%'
          className='pointer'
          style={{borderBottom: active === item? '2px solid white': '', fontSize: "1.2em"}}
          onClick={() => onClick(item)}
        >
          {item.charAt(0).toUpperCase() +
           item.substring(1).toLowerCase().replace(/_/g, " ")}
        </Text>
      ))}
  </Grid>
  );


  export default Switch;