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

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

export interface InfoSectionProps extends React.ComponentProps<"section"> {
	icon?: React.ReactNode;
	badge?: string;
	title: string;
	description: string;
	action?: InfoSectionAction;
	reverse?: boolean;
}

export function InfoSection({
	icon,
	badge,
	title,
	description,
	action,
	reverse = false,
	className,
	children,
	...props
}: InfoSectionProps) {
	return (
		<section
			data-slot="info-section"
			className={cn(
				"flex flex-col gap-10 px-4 py-16 md:flex-row md:items-center md:gap-16",
				reverse && "md:flex-row-reverse",
				className,
			)}
			{...props}
		>
			<div className="flex flex-1 flex-col gap-4">
				{(icon || badge) && (
					<div className="flex items-center gap-2 text-muted-foreground">
						{icon && <span className="[&_svg]:size-5">{icon}</span>}
						{badge && (
							<span className="text-xs font-medium tracking-wide uppercase">
								{badge}
							</span>
						)}
					</div>
				)}

				<h2 className="text-2xl font-bold tracking-tight text-foreground md:text-3xl">
					{title}
				</h2>

				<p className="max-w-lg text-base leading-relaxed text-muted-foreground">
					{description}
				</p>

				{action && (
					<div className="pt-2">
						<a
							href={action.href}
							className="inline-flex h-9 cursor-pointer items-center justify-center rounded border border-border bg-background px-4 text-sm font-medium text-foreground transition-colors hover:bg-muted"
						>
							{action.label}
						</a>
					</div>
				)}
			</div>

			{children && (
				<div className="flex flex-1 items-center justify-center">
					{children}
				</div>
			)}
		</section>
	);
}