"use client";

import { BracketButton } from "@zexon/ui/components/button";
import { cn } from "@zexon/ui/lib/utils";
import type * as React from "react";

export interface HeroAction {
	label: string;
	href: string;
}

export interface HeroSectionProps
	extends Omit<React.ComponentProps<"section">, "title"> {
	badge?: React.ReactNode;
	title: React.ReactNode;
	highlight?: string;
	description?: string;
	primaryAction?: HeroAction;
	secondaryAction?: HeroAction;
}

export function HeroSection({
	badge,
	title,
	highlight,
	description,
	primaryAction,
	secondaryAction,
	className,
	children,
	...props
}: HeroSectionProps) {
	return (
		<section
			data-slot="hero-section"
			className={cn(
				"flex flex-col items-center justify-center gap-6 px-4 py-20 text-center md:py-32",
				className,
			)}
			{...props}
		>
			{badge && (
				<div
					data-slot="hero-badge"
					className="inline-flex items-center gap-2 rounded border border-border bg-muted/50 px-3 py-1.5 text-xs font-medium text-muted-foreground"
				>
					{badge}
				</div>
			)}

			<h1
				data-slot="hero-title"
				className="max-w-3xl text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl"
			>
				{highlight ? renderTitleWithHighlight(title, highlight) : title}
			</h1>

			{description && (
				<p
					data-slot="hero-description"
					className="max-w-xl text-base text-muted-foreground md:text-lg"
				>
					{description}
				</p>
			)}

			{(primaryAction || secondaryAction) && (
				<div className="flex flex-wrap items-center justify-center gap-3 pt-2">
					{secondaryAction && (
						<a
							href={secondaryAction.href}
							className="inline-flex h-10 cursor-pointer items-center justify-center rounded border border-border bg-background px-5 text-sm font-medium text-foreground transition-colors hover:bg-muted"
						>
							{secondaryAction.label}
						</a>
					)}
					{primaryAction && (
						<BracketButton
							asChild
							size="lg"
							className="inline-flex h-10 cursor-pointer items-center justify-center  px-5 text-sm font-medium transition-colors hover:bg-primary/90 border-primary/10 bg-primary/10 text-primary"
						>
							<a href={primaryAction.href}>{primaryAction.label}</a>
						</BracketButton>
					)}
				</div>
			)}

			{children}
		</section>
	);
}

function renderTitleWithHighlight(
	title: React.ReactNode,
	highlight: string,
): React.ReactNode {
	if (typeof title !== "string") return title;

	const idx = title.toLowerCase().indexOf(highlight.toLowerCase());
	if (idx === -1) return title;

	const before = title.slice(0, idx);
	const match = title.slice(idx, idx + highlight.length);
	const after = title.slice(idx + highlight.length);

	return (
		<>
			{before}
			<span className="text-primary">{match}</span>
			{after}
		</>
	);
}