"use client"
import { Button, clx } from "@medusajs/ui"
import { ChevronRightMini } from "@medusajs/icons"
import {
  LayoutComponentDefinition,
  LayoutContext,
} from "@vibentec/component-map"

export function DefaultCtaBanner({
  nodes,
  context,
}: {
  nodes: LayoutComponentDefinition
  context: LayoutContext
}) {
  const props = nodes.config ?? {}
  return (
    <div
      className={clx(
        "relative w-[544px] bg-white rounded-[24px] border border-[#E6EFFC] shadow-[0_12px_40px_rgba(17,49,78,0.10)] p-6",
        props.className
      )}
    >
      {props.tagText && (
        <div
          className={clx(
            "inline-flex items-center rounded-full bg-[#FCE9DA] text-[#E68445] px-3 py-1 text-sm font-medium",
            props.tagTextClassName
          )}
        >
          {props.tagText}
        </div>
      )}

      {props.titleText && (
        <h1
          className={clx(
            "mt-4 text-[#11314E] font-semibold leading-normal text-[56px]",
            props.titleTextClassName
          )}
        >
          {props.titleText}
        </h1>
      )}

      {props.descriptionText && (
        <p
          className={clx(
            "mt-5 text-[#285A86] text-[16px] sm:text-xl opacity-80",
            props.descriptionTextClassName
          )}
        >
          {props.descriptionText}
        </p>
      )}

      <Button
        className={clx(
          "mt-8 inline-flex items-center gap-2 bg-[#0F2740] hover:bg-[#173551] text-white px-6 py-3 rounded-[12px] shadow-md",
          props.buttonTextClassName
        )}
      >
        {props.buttonText}
        <ChevronRightMini />
      </Button>
    </div>
  )
}