'use client';
import { cn } from '@/lib/utils';
import '@/styles.css';
import * as React from 'react';
import Wrapper from '@/components/common/Wrapper';
import { HeadingProps } from '@/types/common';

export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
  ({ className, styling, text, ...props }, ref) => {
    return (
      <Wrapper styling={styling} className='overflow-wrap' style={{fontSize: 'min(var(--heading-font-size-base), 100px)'}}>
        <h1
          ref={ref}
          className={cn('font-bold relative builder heading', className)}
          style={{
            fontFamily: styling?.fontFamily ?? 'var(--heading-font-family, sans-serif)',
            fontWeight: styling?.fontWeight ?? 'var(--heading-font-weight, 700)',
            textAlign: styling?.align ?? 'left',
          }}
          {...props}
        >
          {text}
        </h1>
      </Wrapper>
    );
  }
);

Heading.displayName = 'Heading';
