import React from "react";
import { Link } from "react-router-dom";
import { Cell } from "..";
import style from "./style";

const Tab = props => {
  const activeTabStyle = props.vertical
    ? style.tabActiveVertical
    : style.tabActive;

  let isActive = props.active ? activeTabStyle : null;
  isActive = props.currentTab === props.name ? activeTabStyle : isActive;

  return (
    <Link onClick={props.onClick} to={props.href}>
      <Cell style={{ ...style.tab, ...isActive }} {...props}>
        {props.children}
      </Cell>
    </Link>
  );
};

Tab.defaultProps = {
  active: false,
  name: "",
  currentTab: false,
  href: "#"
};

export default Tab;