"use client";

import type { ContainerProps } from "@zexon/ui/components/container";
import { Container } from "@zexon/ui/components/container";
import {
	SectionLabel,
	type SectionLabelProps,
} from "@zexon/ui/components/section-label";
import { cn } from "@zexon/ui/lib/utils";
import type * as React from "react";

export interface SectionHeaderProps extends React.ComponentProps<"div"> {
	index: number;
	total: number;
	label: string;
	/** Conteúdo à direita (ações, metadados). */
	trailing?: React.ReactNode;
	/** Props adicionais para `SectionLabel` (exceto `index`, `total`, `label`). */
	sectionLabelProps?: Omit<SectionLabelProps, "index" | "total" | "label">;
	/** Props adicionais para `Container` (exceto `children`). */
	containerProps?: Omit<ContainerProps, "children">;
	/** Classe da faixa interior (padding, alinhamento). */
	contentClassName?: string;
}

export function SectionHeader({
	index,
	total,
	label,
	trailing,
	sectionLabelProps,
	containerProps,
	contentClassName,
	className,
	...props
}: SectionHeaderProps) {
	return (
		<div
			data-slot="section-header"
			className={cn("w-full min-w-0", className)}
			{...props}
		>
			<Container {...containerProps}>
				<div
					className={cn(
						"flex min-h-20 min-w-0 w-full items-center justify-between gap-4 pr-4 -ml-px py-3 md:pr-6",
						contentClassName,
					)}
				>
					<div className="min-w-0 flex-1">
						<SectionLabel
							index={index}
							total={total}
							label={label}
							{...sectionLabelProps}
						/>
					</div>
					{trailing ? <div className="shrink-0">{trailing}</div> : null}
				</div>
			</Container>
		</div>
	);
}