'use client'

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

export interface IPktAlert extends PktElType {
  skin?: 'error' | 'success' | 'warning' | 'info'
  closeAlert?: boolean
  title?: string
  date?: string
  ariaLive?: 'off' | 'polite' | 'assertive'
  compact?: boolean
  role?: string
  onClose?: (e: CustomEvent) => void
}

const LitComponent: FC<IPktAlert> = createComponent({
  tagName: 'pkt-alert',
  elementClass: PktElAlert as PktElConstructor<HTMLElement>,
  react: React,
  displayName: 'PktAlert',
  events: {
    onClose: 'close' as EventName<CustomEvent>,
  },
})

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

PktAlert.displayName = 'PktAlert'