'use client'

import { createComponent, EventName } from '@lit/react'
import { type IPktConsent as IPktElConsent, PktConsent as PktElConsent } from '@oslokommune/punkt-elements'
// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
import React, { ForwardRefExoticComponent, LegacyRef } from 'react'

export interface IPktConsent extends IPktElConsent {
  ref?: LegacyRef<HTMLDivElement>
  onToggleConsent?: (e: CustomEvent) => void
}

export const PktConsent: ForwardRefExoticComponent<IPktConsent> = createComponent({
  tagName: 'pkt-consent',
  elementClass: PktElConsent,
  react: React,
  displayName: 'PktConsent',
  events: {
    onToggleConsent: 'toggle-consent' as EventName<CustomEvent>,
  },
}) as ForwardRefExoticComponent<IPktConsent>

PktConsent.displayName = 'PktConsent'