import React from "react";

import "./title.scss";

import PropTypes from "prop-types";

export default function Title({ children, level = 4, className }) {
  return <h3 className={`${className} size-${level}`}>{children}</h3>;
}

Title.propTypes = {
   /** The content of the title. Can be a string or any valid React node.*/
  children: PropTypes.node.isRequired,

   /** The level of the title, which determines the size and weight of the text. Can be a number from 1 to 5.*/
  level: PropTypes.oneOf([1, 2, 3, 4, 5]),

   /** A custom class name for the title component.*/
  className: PropTypes.string,

   /** The color of the title text. Can be a CSS color value or a function that returns a CSS color value.*/
  color: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),

   /** The font family used for the title. Can be a CSS font stack or a specific font name.*/
  fontFamily: PropTypes.string,

   /** The weight of the title text. Can be a number between 100 and 900 in increments of 100.*/
  fontWeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

   /** The size of the title text. Can be a CSS size value or a number representing the font size in pixels.*/
  fontSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

   /** The line height of the title text. Can be a number or a string representing a unitless value or a CSS size value.*/
  lineHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

   /** The letter spacing of the title text. Can be a number representing the spacing in pixels, or a string representing a CSS size value.*/
  letterSpacing: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};