import React, { ReactElement } from 'react';
import css from '../../../utils/css';

import StyledTitle from './StyledTitle';

import { CommonProps } from '../../common';

export interface TitleProps extends CommonProps {
  /**
   * Title content.
   */
  children: string | ReactElement;
  /**
   * Title's font-weight.
   */
  fontWeight?: 'light' | 'regular' | 'semi-bold' | 'bold';
  /**
   * Visual intent color to apply to text.
   */
  intent?: 'main' | 'subdued';
  /**
   * The level of Title including 1, 2, 3, 4 or 5 which are equivalent to h1, h2, h3, h4 and h5.
   */
  level?: 1 | 2 | 3 | 4 | 5;
}

const Title = ({
  level = 1,
  children,
  intent = 'main',
  fontWeight = 'semi-bold',
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: TitleProps): ReactElement => (
  <StyledTitle
    id={id}
    className={className}
    style={{ ...style, ...css(sx) }}
    data-test-id={dataTestId}
    themeLevel={level}
    themeIntent={intent}
    themeFontWeight={fontWeight}
  >
    {children}
  </StyledTitle>
);

export default Title;