import classnames from 'classnames/bind';
import React from 'react';
import { SilkeTextTextProps } from './silke-text-types';
import styles from './silke-text.scss';

export const cl = classnames.bind(styles);

export function SilkeText({
  tag = 'span',
  color,
  weight,
  flex,
  overflow,
  brandFont,
  size,
  ...rest
}: SilkeTextTextProps) {
  rest.className = cl('text', rest.className, color, weight, size, {
    flex,
    overflow,
    brandFont,
  });
  return React.createElement(tag, rest);
}

export const SilkeTextSmall = (props: SilkeTextTextProps) => <SilkeText {...props} size="small" />;

export const SilkeTextMicro = (props: SilkeTextTextProps) => <SilkeText {...props} size="micro" />;