'use client'

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

export interface IPktModal extends PktElType {
  headingText?: string
  hideCloseButton?: boolean
  closeOnBackdropClick?: boolean
  size?: 'small' | 'medium' | 'large'
  removePadding?: boolean
  closeButtonSkin?: 'blue' | 'yellow-filled'
  variant?: 'dialog' | 'drawer'
  drawerPosition?: 'left' | 'right'
  transparentBackdrop?: boolean
}
const LitComponent: FC<IPktModal> = createComponent({
  tagName: 'pkt-modal',
  elementClass: PktElModal as PktElConstructor<HTMLElement>,
  react: React,
  displayName: 'PktModal',
  events: {},
})

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

PktModal.displayName = 'PktModal'