import * as React from "react";
import { ArrowRight, Sparkles } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AuroraHeroProps extends React.HTMLAttributes<HTMLDivElement> {
  badge?: string;
  title?: string;
  subtitle?: string;
  primaryLabel?: string;
  secondaryLabel?: string;
}

export function AuroraHero({
  badge = "Now in public beta",
  title = "Build interfaces at the speed of thought",
  subtitle = "A registry of production-ready React components your AI agent can install in one command.",
  primaryLabel = "Get started",
  secondaryLabel = "Browse components",
  className,
  ...props
}: AuroraHeroProps) {
  return (
    <div
      className={cn(
        "relative w-full overflow-hidden rounded-2xl border bg-background px-6 py-20 text-center sm:px-12",
        className
      )}
      {...props}
    >
      <div className="pointer-events-none absolute inset-0 opacity-60">
        <div className="absolute -top-24 left-1/4 h-72 w-72 animate-pulse rounded-full bg-violet-500/30 blur-3xl" />
        <div className="absolute -top-10 right-1/4 h-72 w-72 animate-pulse rounded-full bg-sky-500/30 blur-3xl [animation-delay:1s]" />
        <div className="absolute bottom-0 left-1/3 h-72 w-72 animate-pulse rounded-full bg-emerald-500/20 blur-3xl [animation-delay:2s]" />
      </div>

      <div className="relative mx-auto flex max-w-3xl flex-col items-center gap-6">
        <span className="inline-flex items-center gap-2 rounded-full border bg-background/60 px-3 py-1 text-xs font-medium backdrop-blur">
          <Sparkles className="size-3.5 text-violet-500" />
          {badge}
        </span>

        <h1 className="text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
          {title}
        </h1>

        <p className="max-w-xl text-pretty text-base text-muted-foreground sm:text-lg">
          {subtitle}
        </p>

        <div className="flex flex-wrap items-center justify-center gap-3 pt-2">
          <button className="group inline-flex h-11 items-center gap-2 rounded-lg bg-primary px-6 text-sm font-medium text-primary-foreground transition-transform hover:scale-[1.02] active:scale-[0.98]">
            {primaryLabel}
            <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
          </button>
          <button className="inline-flex h-11 items-center rounded-lg border px-6 text-sm font-medium transition-colors hover:bg-accent">
            {secondaryLabel}
          </button>
        </div>
      </div>
    </div>
  );
}

Related components