'use client'

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

export interface IPktTag extends PktElType {
  skin?: 'blue' | 'blue-light' | 'blue-dark' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray'
  textStyle?: 'normal-text' | 'thin-text'
  size?: 'small' | 'medium' | 'large'
  closeTag?: boolean
  iconName?: string
  ariaLabel?: string
  onClose?: (e: CustomEvent) => void
}

const LitComponent: FC<IPktTag> = createComponent({
  tagName: 'pkt-tag',
  elementClass: PktElTag as PktElConstructor<HTMLElement>,
  react: React,
  displayName: 'PktTag',
  events: {
    onClose: 'close' as EventName<CustomEvent>,
  },
})

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

PktTag.displayName = 'PktTag'