'use client'

import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
import { createComponent } from '@lit/react'
import { PktLinkCard as PktElLinkCard } from '@oslokommune/punkt-elements'
import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'

export interface IPktLinkCard extends PktElType {
  skin?: 'normal' | 'blue' | 'beige' | 'green' | 'gray' | 'beige-outline' | 'gray-outline'
  title?: string
  href?: string
  iconName?: string
  openInNewTab?: boolean
  external?: boolean
}

const LitComponent: FC<IPktLinkCard> = createComponent({
  tagName: 'pkt-linkcard',
  elementClass: PktElLinkCard as PktElConstructor<HTMLElement>,
  react: React,
  displayName: 'PktLinkCard',
  events: {},
})

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

PktLinkCard.displayName = 'PktLinkCard'