"use client"

import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map"
import { clx } from "@medusajs/ui"
import ReactMarkdown from "react-markdown"
import LocalizedClientLink from "@modules/common/components/localized-client-link"
import rehypeRaw from "rehype-raw"
import remarkBreaks from "remark-breaks"

interface BannerCTAProps {
  node: LayoutComponentDefinition
  context: LayoutContext
}

interface BannerConfigProps {
  text?: string
  href?: string
  iconLeft?: string
  iconRight?: string
  className?: string
}
export default function BannerCTA({ node, context }: BannerCTAProps) {
  const props = node.config as BannerConfigProps ?? {}
  const text = props.text ?? ""
  const href = props.href ?? undefined
  const iconLeft = props.iconLeft
  const iconRight = props.iconRight

  const className = clx(
    "content-container flex justify-center items-center text-center w-full h-full text-xs font-medium",
    props.className
  )

  const content = (
    <div className="flex items-center gap-2">
      {iconLeft && <DynamicIcon name={iconLeft} />}
      <div className="leading-none">
        <ReactMarkdown
          children={text}
          remarkPlugins={[remarkBreaks]}
          rehypePlugins={[rehypeRaw]}
        />
      </div>
      {iconRight && <DynamicIcon name={iconRight} />}
    </div>
  )

  return href ? (
    <LocalizedClientLink href={href} className={className}>
      {content}
    </LocalizedClientLink>
  ) : (
    <div className={className}>{content}</div>
  )
}

function DynamicIcon({ name }: { name: string }) {
  return <span className="material-symbols-outlined text-sm">{name}</span>
}