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

export function BearCtaBanner({
  nodes,
  context,
}: {
  nodes: LayoutComponentDefinition
  context: LayoutContext
}) {
  const props = nodes.config ?? {}
  
  return (
    <div className={clx(
      "relative w-full p-12 flex flex-col items-start justify-center text-left",
      props.className
    )}>
      <p className="text-[#0D382E] text-lg font-medium mb-2">
        {props.tagText ?? "So einfach kann Frühstück sein – mit unseren leckeren Overnight Oats."}
      </p>

      <h1 className="text-[#0D382E] font-black leading-tight text-[64px] mb-8 tracking-tight">
        {props.titleText ?? "breakfast made easy."}
      </h1>

      <Button className="inline-flex items-center justify-center bg-[#FCEE56] hover:bg-[#FCEE56]/90 text-[#0D382E] px-8 py-3 rounded-full font-bold text-lg shadow-none border-none">
        {props.buttonText ?? "Jetzt entdecken"}
      </Button>
    </div>
  )
}