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

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

  const classes = {
    container: props.className ?? "",
    title: props.titleClassName ?? "text-[#003F31] text-[28px] font-semibold mb-10",
    grid: props.gridClassName ?? "grid grid-cols-1 small:grid-cols-2 xl:grid-cols-4 gap-6",
    card: props.cardClassName ?? "rounded-2xl overflow-hidden bg-[#CFECD9]",
    image: props.imageClassName ?? "w-full h-[260px] object-cover",
    content: props.contentClassName ?? "p-6",
    name: props.nameClassName ?? "text-[#003F31] text-[20px] font-bold",
    subtitle: props.subtitleClassName ?? "mt-1 text-[#003f31b3] text-[14px]",
    quote: props.quoteClassName ?? "mt-4 text-[#003F31] text-[16px]",
    cta: props.ctaClassName ?? "mt-6 inline-flex items-center justify-center bg-[#FCEE56] text-[#0D382E] px-6 py-2 rounded-full font-bold",
  }

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

  const renderCard = (entry: any, idx: number) => {
    const imageEl = entry.imageSrc ? (
      <img
        src={entry.imageSrc}
        alt={entry.imageAlt ?? entry.name ?? `feedback-card-${idx}`}
        className={classes.image}
      />
    ) : null

    const ctaEl = entry.cta?.href ? (
      <LocalizedClientLink href={entry.cta.href} className={clx(classes.cta, entry.cta?.className)}>
        {entry.cta.label ?? "Mehr erfahren"}
      </LocalizedClientLink>
    ) : entry.cta?.label ? (
      <button className={clx(classes.cta, entry.cta?.className)}>{entry.cta.label}</button>
    ) : null

    return (
      <div className={clx(classes.card, entry.className)} key={`vt-feedback-card-${idx}`}>
        {imageEl}
        <div className={clx(classes.content)}>
          {entry.name && <div className={clx(classes.name, entry.nameClassName)}>{entry.name}</div>}
          {entry.subtitle && (
            <div className={clx(classes.subtitle, entry.subtitleClassName)}>{entry.subtitle}</div>
          )}
          {entry.quote && <div className={clx(classes.quote, entry.quoteClassName)}>{entry.quote}</div>}
          {ctaEl}
        </div>
      </div>
    )
  }

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

