'use client'

import { PktElConstructor, PktElType } from '@/interfaces/IPktElements'
import { createComponent } from '@lit/react'
import React, { ForwardRefExoticComponent, LegacyRef } from 'react'
import { FC, forwardRef } from 'react'
import { PktAccordion as PktElAccordion } from '@oslokommune/punkt-elements'
import { TPktAccordionSkin } from '@oslokommune/punkt-elements'

export interface IPktAccordion extends PktElType {
  compact?: boolean
  /**
   * @default skin: "borderless"
   */
  skin?: TPktAccordionSkin
  /**
   * @description A unique identifier to connect the accordion with a heading
   */
  ariaLabelledBy?: string
  /**
   * @description A unique identifier to connect the accordion with a heading
   */
  ref?: LegacyRef<HTMLElement>
}

const LitComponent: FC<IPktAccordion> = createComponent({
  tagName: 'pkt-accordion',
  elementClass: PktElAccordion as PktElConstructor<HTMLElement>,
  react: React,
  displayName: 'PktAccordion',
}) as ForwardRefExoticComponent<IPktAccordion>

export const PktAccordion: FC<IPktAccordion> = forwardRef(({ children, ...props }: IPktAccordion, ref) => {
  return (
    <LitComponent data-testid="pkt-accordion" {...props} ref={ref}>
      <div className="pkt-contents">{children}</div>
    </LitComponent>
  )
})

PktAccordion.displayName = 'PktAccordion'