import * as React from "react";
import { cn } from "@/lib/utils";

type HeroSplitProps = Omit<React.ComponentProps<"section">, "title"> & {
  /** Small uppercase line above the title. */
  eyebrow?: string;
  /** The headline. Pass a string or your own element. */
  title: React.ReactNode;
  /** One or two sentences under the title. */
  description?: React.ReactNode;
  /** Buttons and links, usually one primary and one plain link. */
  actions?: React.ReactNode;
  /** Which side the product sits on from the container's 2xl width up. */
  side?: "right" | "left";
  /** The product: a browser frame, a screenshot, a demo. */
  children?: React.ReactNode;
};

/**
 * A hero with the copy on one side and the product on the other.
 * Splits by container width, not viewport, so it also works inside a card or a column.
 * Server component. Everything is a slot.
 */
export function HeroSplit({
  eyebrow,
  title,
  description,
  actions,
  side = "right",
  children,
  className,
  ...props
}: HeroSplitProps) {
  return (
    <section className={cn("@container w-full py-8 @2xl:py-16 @5xl:py-24", className)} {...props}>
      <div className="mx-auto grid w-full max-w-6xl items-center gap-8 px-4 @2xl:grid-cols-2 @2xl:gap-12 @2xl:px-6">
        <div className={cn("flex flex-col items-start gap-4 @2xl:gap-5", side === "left" && "@2xl:order-2")}>
          {eyebrow && <p className="m-0 font-mono text-xs tracking-wide text-muted-foreground uppercase">{eyebrow}</p>}
          <h1 className="m-0 text-2xl leading-none font-medium tracking-tight text-balance @2xl:text-4xl @5xl:text-5xl">
            {title}
          </h1>
          {description && (
            <p className="m-0 max-w-md text-sm text-muted-foreground @2xl:text-base @5xl:text-lg">{description}</p>
          )}
          {actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
        </div>
        {children && <div className="min-w-0">{children}</div>}
      </div>
    </section>
  );
}