import React from 'react';
import styled from 'styled-components';
import { MultitabType } from './TabsContainer';

export interface ISingleTab {
  active: boolean;
  label: string;
  onPointerDown: () => void;
  type: MultitabType;
}

export const Tab: React.FC<ISingleTab> = ({
  active,
  label,
  onPointerDown,
  type,
}) => {
  return (
    <CustomTab
      activeTab={active}
      onPointerDown={onPointerDown}
      className={type}
    >
      <p>{label}</p>
    </CustomTab>
  );
};

interface ICustomTab {
  activeTab: boolean;
}

const CustomTab = styled.div<ICustomTab>`
  width: 120px;
  color: white;
  font-size: 0.8rem;

  &.gray {
    border-left: 0.25rem solid rgba(0, 0, 0, 0.25);
    border-right: 0.25rem solid rgba(0, 0, 0, 0.25);
    border-top: 0.25rem solid rgba(0, 0, 0, 0.25);
    border-bottom: ${props =>
      props.activeTab ? '' : '0.25rem solid rgba(0, 0, 0, 0.25)'};
    background: ${props => (props.activeTab ? '#4E4A4E' : '#2b292b')};
  }

  &.brown {
    border-left: 0.25rem solid #996d55;
    border-right: 0.25rem solid #996d55;
    border-top: 0.25rem solid #996d55;
    border-bottom: ${props => (props.activeTab ? '' : '0.25rem solid #996d55')};
    background: ${props => (props.activeTab ? '#BF886A' : '#B67051')};
  }

  margin-right: 10px;
  p {
    text-align: center;
    font-size: 0.6rem;

    opacity: ${props => (props.activeTab ? '1' : '0.5')};
  }

  border-radius: 5px 5px 0 0;

  position: relative;
  top: 0.3rem;
`;
