'use client'

import { createComponent } from '@lit/react'
import { type IPktLoader as IPktElLoader, PktLoader as PktElLoader } from '@oslokommune/punkt-elements'
// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
import React, { FC, ForwardedRef, forwardRef, type ReactElement } from 'react'

import type { PktElConstructor, PktElType } from '@/interfaces/IPktElements'

type ExtendedLoader = IPktElLoader & PktElType

// eslint-disable-next-line @typescript-eslint/no-empty-object-type
export interface IPktLoader extends ExtendedLoader {}

const LitComponent: FC<IPktLoader> = createComponent({
  tagName: 'pkt-loader',
  elementClass: PktElLoader as PktElConstructor<HTMLElement>,
  react: React,
  displayName: 'PktLoader',
  events: {},
})

export const PktLoader: FC<IPktLoader> = forwardRef(
  ({ children, ...props }: IPktLoader, ref: ForwardedRef<HTMLElement>): ReactElement => {
    return (
      <LitComponent {...props} ref={ref}>
        <div className="pkt-contents">{children}</div>
      </LitComponent>
    )
  },
)

PktLoader.displayName = 'PktLoader'