'use client'

import { createComponent } from '@lit/react'
import { IPktHeading as IPktElHeading, PktHeading as PktElHeading } from '@oslokommune/punkt-elements'
// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
import React, { FC, forwardRef, ForwardRefExoticComponent, type LegacyRef, type ReactNode } from 'react'

import { PktElConstructor } from '@/interfaces/IPktElements'

export interface IPktHeading extends IPktElHeading {
  children?: ReactNode | ReactNode[]
  ref?: 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'