'use client'

import React, { forwardRef, ForwardedRef, FC, ReactElement } from 'react'
import { createComponent } from '@lit/react'
import { PktLoader as PktElLoader } from '@oslokommune/punkt-elements'
import type { IPktLoader as IPktElLoader } from '@oslokommune/punkt-elements'
import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'

type ExtendedLoader = IPktElLoader & PktElType

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'