'use client'

import React, { ForwardRefExoticComponent, LegacyRef } from 'react'
import { createComponent, EventName } from '@lit/react'
import { PktConsent as PktElConsent } from '@oslokommune/punkt-elements'
import type { IPktConsent as IPktElConsent } from '@oslokommune/punkt-elements'

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'