import { Github } from "@medusajs/icons"
import { Button, Heading } from "@medusajs/ui"
import { VtCarousel } from "../vt-carousel"
import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map"

export default function HeroDefault({ node, context }: { node: LayoutComponentDefinition; context: LayoutContext }) {
  const props = node.config ?? {}
  const imageDisplayer = props.ImageDisplayer

  if (imageDisplayer) {
    return (
      <div className="absolute inset-0 z-auto w-full h-full">
        <VtCarousel nodes={{ config: imageDisplayer.config }} context={context} />
      </div>
    )
  }

  return (
    <div className="absolute inset-0 z-auto flex flex-col justify-center items-center text-center small:p-32 gap-6">
      <span>
        <Heading
          level="h1"
          className="text-3xl leading-10 text-ui-fg-base font-normal"
        >
          Ecommerce Starter Template
        </Heading>
        <Heading
          level="h2"
          className="text-3xl leading-10 text-ui-fg-subtle font-normal"
        >
          Powered by Medusa and Next.js
        </Heading>
      </span>
      <a
        href="https://github.com/medusajs/nextjs-starter-medusa"
        target="_blank"
      >
        <Button variant="secondary">
          View on GitHub
          <Github />
        </Button>
      </a>
    </div>
  )
}
