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

export function VtCtaBanner({
  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
    )}>
      <div className="inline-flex items-center rounded-full bg-[#FCE9DA] text-[#E68445] px-3 py-1 text-sm font-medium">
        {props.tagText}
      </div>

      <h1 className="mt-4 text-[#11314E] font-semibold leading-tight text-[56px]">
        {props.titleText}
      </h1>

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

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