'use client'

import { createComponent } from '@lit/react'
import { FC, forwardRef } from 'react'
import { PktElConstructor } from '@/interfaces/IPktElements'
import { PktHeading as PktElHeading, IPktHeading as IPktElHeading } from '@oslokommune/punkt-elements'
import React, { ForwardRefExoticComponent } from 'react'

export interface IPktHeading extends IPktElHeading {
  children?: React.ReactNode | React.ReactNode[]
  ref?: React.LegacyRef<HTMLElement>
}

const LitComponent: FC<IPktHeading> = createComponent({
  tagName: 'pkt-heading',
  elementClass: PktElHeading as PktElConstructor<HTMLElement>,
  react: React,
  displayName: 'PktHeading',
}) as ForwardRefExoticComponent<IPktHeading>

export const PktHeading: FC<IPktHeading> = forwardRef(({ children, ...props }: IPktHeading, ref) => {
  return (
    <LitComponent data-testid="pkt-heading" {...props} ref={ref}>
      {children}
    </LitComponent>
  )
})

PktHeading.displayName = 'PktHeading'