import React from 'react';
import { SilkeText } from './silke-text';
import styles from './silke-title.scss';
import { SilkeTitleProps } from './silke-text-types';

export function SilkeTitle({
  tag,
  kind,
  color,
  weight,
  flex,
  overflow,
  size,
  className,
  ...rest
}: SilkeTitleProps) {
  const tagProp = tag || 'h2';
  let cl = styles.title + ' ' + styles[kind];
  if (className) cl += ' ' + className;
  if (size) cl += ' ' + styles[size];

  return (
    <SilkeText
      tag={tagProp}
      className={cl}
      color={color}
      weight={weight}
      flex={flex}
      brandFont={kind !== 'xxs'}
      overflow={overflow}
      {...rest}
    />
  );
}