'use client'

import React, {
  FC,
  ForwardedRef,
  forwardRef,
  ForwardRefExoticComponent,
  LegacyRef,
  LinkHTMLAttributes,
  ReactElement,
} from 'react'
import { createComponent } from '@lit/react'
import { PktLink as PktElLink } from '@oslokommune/punkt-elements'

interface IPktLink extends LinkHTMLAttributes<HTMLAnchorElement> {
  href?: string
  iconName?: string | undefined
  iconPosition?: string | undefined
  external?: boolean
  target?: string | null
  ref?: LegacyRef<HTMLAnchorElement>
}

const LitComponent = createComponent({
  tagName: 'pkt-link',
  elementClass: PktElLink,
  react: React,
  displayName: 'PktLink',
}) as ForwardRefExoticComponent<IPktLink>

export const PktLink: FC<IPktLink> = forwardRef(
  ({ children, ...props }: IPktLink, ref: LegacyRef<HTMLAnchorElement>): ReactElement => {
    return (
      <LitComponent {...props} ref={ref}>
        <span className="pkt-contents">{children}</span>
      </LitComponent>
    )
  },
)

PktLink.displayName = 'PktLink'