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 VtCategoryHighlight({
  nodes,
  context,
}: {
  nodes: LayoutComponentDefinition
  context: LayoutContext
}) {
  const props = nodes.config ?? {}

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

  const classes = {
    container: props.className ?? "content-container py-12",
    title:
      props.titleClassName ?? "text-[#003F31] text-[28px] font-semibold mb-6",
    grid: props.gridClassName ?? "grid grid-cols-3 gap-6 w-full",
    tile:
      props.tileClassName ??
      "relative rounded-2xl overflow-hidden bg-white aspect-square w-full",
    label: props.labelClassName ?? "text-[#003F31] text-[18px] font-semibold",
    image: props.imageClassName ?? "w-full h-full object-contain",
  }

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

  const renderTile = (tile: any, idx: number) => {
    if (!tile.imageSrc) {
      return (
        <div
          className={clx("flex w-full h-full", tile.className)}
          key={`tile-${idx}`}
        >
          {tile.headingLabel && (
            <div className={clx(tile.headingClassName)}>{tile.headingLabel}</div>
          )}
          {tile.descriptionLabel && (
            <div className={tile.descriptionClassName}>
              {tile.descriptionLabel}
            </div>
          )}
          {tile.buttonLabel && (
            <button className={tile.buttonClassName}>{tile.buttonLabel}</button>
          )}
        </div>
      )
    }

    const content = (
      <div className={clx("relative w-full h-full")}>
        <img
          src={tile.imageSrc}
          alt={tile.label ?? `category-${idx}`}
          className={clx(classes.image, tile.imageClassName)}
        />
        {tile.label && <span className={classes.label}>{tile.label}</span>}
      </div>
    )

    return tile.href ? (
      <LocalizedClientLink
        key={`tile-${idx}`}
        href={tile.href}
        className={clx("w-full h-full", tile.className)}
      >
        {content}
      </LocalizedClientLink>
    ) : (
      <div className={clx(tile.className, "w-full h-full")} key={`tile-${idx}`}>
        {content}
      </div>
    )
  }

  return (
    <section className={classes.container}>
      {title && <h2 className={classes.title}>{title}</h2>}
      <div className={classes.grid}>
        {items.map((tile: any, idx: number) => renderTile(tile, idx))}
      </div>
    </section>
  )
}
