'use client'

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

export interface IPktMessagebox extends PktElType {
  skin?: 'beige' | 'red' | 'green' | 'blue'
  title?: string
  compact?: boolean
  closable?: boolean
  onClose?: (e: CustomEvent) => void
}

const LitComponent: FC<IPktMessagebox> = createComponent({
  tagName: 'pkt-messagebox',
  elementClass: PktElMessagebox as PktElConstructor<HTMLElement>,
  react: React,
  displayName: 'PktMessagebox',
  events: {
    onClose: 'close' as EventName<CustomEvent>,
  },
})

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

PktMessagebox.displayName = 'PktMessagebox'