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

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

  const title: string = props.title ?? "Trusted By"
  const items = props.items ?? []

  const classes = {
    container: props.className ?? "w-full py-12 bg-[#CFECD9]",
    inner: props.innerClassName ?? "content-container flex flex-col items-center",
    title: props.titleClassName ?? "text-[#1f3521] text-[20px] font-bold mb-8",
    brands: props.brandsClassName ?? "flex w-full items-center justify-between gap-12",
    item: props.itemClassName ?? "opacity-90",
    image: props.imageClassName ?? "h-[48px] w-auto object-contain",
    label: props.labelClassName ?? "text-[#1f3521] text-[36px] font-semibold",
  }

  if (!items || items.length === 0) {
    return null
  }

  const renderItem = (brand: any, idx: number) => {
    const content = brand.imageSrc ? (
      <img
        src={brand.imageSrc}
        alt={brand.alt ?? brand.label ?? `brand-${idx}`}
        className={clx(classes.image, brand.imageClassName)}
      />
    ) : (
      <span className={clx(classes.label, brand.className)}>
        {brand.label ?? ""}
      </span>
    )

    return brand.href ? (
      <LocalizedClientLink
        key={`brand-${idx}`}
        href={brand.href}
        className={clx(classes.item, brand.containerClassName)}
      >
        {content}
      </LocalizedClientLink>
    ) : (
      <div className={clx(classes.item, brand.containerClassName)} key={`brand-${idx}`}>
        {content}
      </div>
    )
  }

  return (
    <section className={classes.container}>
      <div className={classes.inner}>
        {title && <div className={classes.title}>{title}</div>}
        <div className={classes.brands}>
          {items.map((brand: any, idx: number) => renderItem(brand, idx))}
        </div>
      </div>
    </section>
  )
}
