'use client'

import React, { forwardRef, ForwardedRef, ReactElement } from 'react'
import { createComponent } from '@lit/react'
import { PktProgressbar as PktElProgressbar } from '@oslokommune/punkt-elements'
import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'
import type { IPktProgressbar as IPktElProgressbar } from '@oslokommune/punkt-elements'

type ExtendedProgressbar = IPktElProgressbar & PktElType

export interface IPktProgressbar extends ExtendedProgressbar {}

const LitComponent = createComponent({
  tagName: 'pkt-progressbar',
  elementClass: PktElProgressbar as PktElConstructor<HTMLElement>,
  react: React,
  displayName: 'PktProgressbar',
  events: {},
})

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

PktProgressbar.displayName = 'PktProgressbar'