"use client";

import { StaggerGroup } from "@zexon/ui/components/stagger-group";
import { cn } from "@zexon/ui/lib/utils";
import type * as React from "react";

export interface FeatureSectionProps extends React.ComponentProps<"section"> {
	header?: React.ReactNode;
	columns?: 2 | 3 | 4;
	/** Delay between staggered children (seconds). @default 0.1 */
	staggerDelay?: number;
}

export function FeatureSection({
	header,
	columns = 3,
	staggerDelay = 0.1,
	className,
	children,
	...props
}: FeatureSectionProps) {
	const colsClass =
		columns === 2
			? "md:grid-cols-2"
			: columns === 4
				? "md:grid-cols-2 lg:grid-cols-4"
				: "md:grid-cols-3";

	return (
		<section
			data-slot="feature-section"
			className={cn("px-4 py-16", className)}
			{...props}
		>
			{header && <div className="mb-10">{header}</div>}

			<StaggerGroup
				className={cn("grid gap-4", colsClass)}
				staggerDelay={staggerDelay}
			>
				{children}
			</StaggerGroup>
		</section>
	);
}