import * as MedusaIcons from "@medusajs/icons"
import { clx } from "@medusajs/ui"
import {
  LayoutComponentDefinition,
  LayoutContext,
} from "@vibentec/component-map"
import LocalizedClientLink from "@modules/common/components/localized-client-link"

export default function VtFooterBottom({
  nodes,
  context,
}: {
  nodes: LayoutComponentDefinition
  context: LayoutContext
}) {
  const props = nodes.config ?? {}

  const renderIcon = (name: string, idx: number) => {
    const IconComp = (MedusaIcons as Record<string, any>)[name]
    if (!IconComp) return null
    return <IconComp key={`${name}-${idx}`} className="shadow-none" />
  }

  const renderLink = (item: any, idx: number, total: number) => {
    const LinkEl = (
      <LocalizedClientLink
        href={item?.href ?? "#"}
        className={clx(
          "hover:underline",
          props.linkClassName
        )}
      >
        {item?.label ?? ""}
      </LocalizedClientLink>
    )

    return (
      <span
        key={`link-${idx}`}
        className={clx("flex items-center", props.linkItemClassName)}
      >
        {LinkEl}
        {idx < total - 1 && (
          <span className={clx("mx-2 text-white", props.separatorClassName)}>|</span>
        )}
      </span>
    )
  }

  return (
    <div
      className={clx(
        "flex w-full items-center justify-between",
        props.className
      )}
    >
      <span className={clx("text-[14px] font-[400] pt-2", props.textClassName)}>
        {props.text}
      </span>
      <div className={clx("flex items-center gap-4")}>
        {props.links && props.links.length > 0 && (
          <div className={clx("flex items-center", props.linksClassName)}>
            {props.links.map((l: any, idx: number) =>
              renderLink(l, idx, props.links.length)
            )}
          </div>
        )}
        <div className={clx("flex items-center gap-2", props.iconsClassName)}>
          {(props.icons ?? []).map(renderIcon)}
        </div>
      </div>
    </div>
  )
}
