import React from 'react';
import { TitleFont } from '.';
import styles from './CustomTitle.module.css';


interface CustomTitleProps {
  font?: TitleFont;
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
  color?: string;
  children: React.ReactNode;
}

export const CustomTitle: React.FC<CustomTitleProps> = ({ 
  font = 'regular', 
  color, 
  children,
  as = 'h2', 
  ...rest
 }) => {
  const fontClass = styles[`font-${font}`] || styles['font-regular']
  const Component = as
  return (
    <Component className={`${styles.customTitle} ${fontClass}`} style={{ color }} {...rest}>
      {children}
    </Component>
  );
};