'use client'

import React, { FC, ReactElement, forwardRef, ReactNode, ForwardedRef } from 'react'
import { createComponent } from '@lit/react'
import { IPktHeading, PktCard as PktElCard } from '@oslokommune/punkt-elements'
import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'
import { IPktTag } from '../tag/Tag'

type TCardSkin = 'outlined' | 'outlined-beige' | 'gray' | 'beige' | 'green' | 'blue'
type TLayout = 'vertical' | 'horizontal'
type TCardPadding = 'none' | 'default'
type TCardImageShape = 'square' | 'round'
type TCardTagPosition = 'top' | 'bottom'

export interface IPktCard extends PktElType {
  ariaLabel?: string
  metaLead?: string | null
  borderOnHover?: boolean | null
  metaTrail?: string | null
  layout?: TLayout
  heading?: string
  headingLevel?: IPktHeading['level']
  image?: { src: string; alt: string }
  imageShape?: TCardImageShape
  clickCardLink?: string | null
  padding?: TCardPadding
  openLinkInNewTab?: boolean | null
  skin?: TCardSkin
  subheading?: string
  tagPosition?: TCardTagPosition
  tags?: (Omit<IPktTag, 'closeTag'> & { text: string })[]
}

const LitComponent: FC<IPktCard> = createComponent({
  tagName: 'pkt-card',
  elementClass: PktElCard as PktElConstructor<HTMLElement>,
  react: React,
  displayName: 'PktCard',
  events: {},
})

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

PktCard.displayName = 'PktCard'