import React from 'react';
import { BoxButtonProps, SilkeBox } from '../silke-box';
import styles from './silke-tabs.scss';
import { SilkeIcon, SilkeIcons } from '../silke-icon';

type IconColor = 'default' | 'neutral' | 'accent' | 'error' | 'success' | 'warning';

export type SilkeTabProps = {
  label: React.ReactNode;
  active?: boolean;
  icon?: SilkeIcons;
  iconColor?: IconColor;
  disabled?: boolean;
} & Omit<BoxButtonProps, 'size' | 'height' | 'width' | 'rounded' | 'children'>;

export function SilkeTab({
  label,
  active,
  className,
  icon,
  iconColor = 'default',
  ...rest
}: SilkeTabProps) {
  let cl = styles.tab;
  if (active) cl += ' ' + styles.active;
  if (className) cl += ' ' + className;

  return (
    <SilkeBox
      tag="button"
      role="tab"
      hPad="s"
      hAlign="center"
      vAlign="center"
      className={cl}
      {...rest}
    >
      {icon && (
        <SilkeIcon
          icon={icon}
          className={[styles.tabIcon, styles[iconColor]].join(' ')}
          data-custom-color={!!iconColor}
        />
      )}
      {label}
    </SilkeBox>
  );
}