'use client'

import React, { ForwardRefExoticComponent, LegacyRef, AnchorHTMLAttributes, MouseEventHandler } from 'react'
import { createComponent } from '@lit/react'
import { PktBackLink as PktElBackLink } from '@oslokommune/punkt-elements'
import type { IPktBackLink as IPktElBackLink } from '@oslokommune/punkt-elements'

type ExtendedBackLink = Omit<IPktElBackLink, 'text'> & AnchorHTMLAttributes<HTMLAnchorElement>

export interface IPktBackLink extends ExtendedBackLink {
  text?: string
  ref?: LegacyRef<HTMLAnchorElement>
  ariaLabel?: string
  onClick?: MouseEventHandler<HTMLAnchorElement>
}

export const PktBackLink = createComponent({
  tagName: 'pkt-backlink',
  elementClass: PktElBackLink,
  react: React,
  displayName: 'PktBackLink',
}) as ForwardRefExoticComponent<IPktBackLink>

PktBackLink.displayName = 'PktBackLink'