import * as React from 'react';
import { CardFolderTabProps } from './Tab';

export interface CardFolderTabsProps {
  /** Sets the tabs of the card, as `CardFolderTabs.Tab` elements. */
  children?: React.ReactNode;
  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook?: string;
  /** Specifies an id of a currently visible tab. */
  activeId: string;
  /** Defines a callback function which is called on tab change. An id of a newly selected tab is passed as a parameter. */
  onTabChange?: (newActiveId: string) => void;
  /** Defines a maximum width of a tab button.
   * Ignored when `mobile` is enabled on `<WixDesignSystemProvider/>`, where tabs keep their full width and the row scrolls horizontally.
   * @default '138px'
   */
  maxTabWidth?: React.CSSProperties['maxWidth'];
  /** Stretches tabs to fill a 100% of a parent container width.
   * @default false
   */
  fluid?: boolean;
  /** Specifies whether text that exceeds tab width is truncated with ellipsis. If false, text wraps to another line.
   * Has no effect when `mobile` is enabled on `<WixDesignSystemProvider/>`, where labels never truncate or wrap.
   * @default true
   */
  ellipsis?: boolean;
  /** Controls tab label font size.
   * @default 'medium'
   */
  size?: TabFontSize;
  /**
   * Specifies a CSS class name to be appended to the component's root element.
   * @internal
   */
  className?: string;
}

export type TabFontSize = 'medium' | 'small';
export class CardFolderTabs extends React.PureComponent<CardFolderTabsProps> {
  static Tab: (props?: CardFolderTabProps) => React.ReactElement;
}