import React, { HTMLAttributes } from 'react';
import { SilkeColor } from '../../silke-theme-provider';

type SilkeTextType = 'small' | 'p' | 'span' | 'strong' | 'div' | 'label';
export type SilkeTitleKind = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
export type SilkeTitleType =
  | 'h1'
  | 'h2'
  | 'h3'
  | 'h4'
  | 'h5'
  | 'h6'
  | 'span'
  | 'label'
  | 'p'
  | 'div';

interface SilkeTextSharedProps extends HTMLAttributes<HTMLElement> {
  color?: SilkeColor;
  weight?: 'strong' | 'light';
  brandFont?: boolean;
  children: React.ReactNode;
  /** flex text block */
  flex?: boolean;
  /** Sets nowrap and adds ellipsis text overflow */
  overflow?: boolean;
  /**
   * Sets font size
   */
  size?: 'micro' | 'small' | 'base' | 'large';
  htmlFor?: string;
}

export interface SilkeTextTextProps extends SilkeTextSharedProps {
  tag?: SilkeTextType | SilkeTitleType;
}

export type SilkeTitleProps = SilkeTextSharedProps & {
  tag?: SilkeTitleType;
  kind: SilkeTitleKind;
};