"use client";

import { Container, type ContainerProps } from "@zexon/ui/components/container";
import { Marquee } from "@zexon/ui/components/marquee";
import { cn } from "@zexon/ui/lib/utils";
import * as React from "react";

export interface BusinessSectionProps extends Omit<ContainerProps, "children"> {
	/** Logos ou nomes em células; omitido = placeholders no marquee. */
	children?: React.ReactNode;
	/** Texto à esquerda (célula inicial). Se omitido, usa o texto padrão com destaques. */
	label?: React.ReactNode;
	/** Logos ou nomes em células; rodam em marquee contínuo. */
	grayscale?: boolean;
	/** Duração de um ciclo completo do marquee (segundos). */
	durationSeconds?: number;
}

const defaultHeadline = (
	<>
		<span className="text-foreground">Confiável para </span>
		<span className="text-orange-500 dark:text-orange-400">80.000+</span>
		<span className="text-foreground"> </span>
		<span className="text-orange-500 dark:text-orange-400">empresas</span>
		<span className="text-foreground"> de todos os tamanhos</span>
	</>
);

export function BusinessSection({
	label = defaultHeadline,
	grayscale = true,
	durationSeconds = 35,
	children,
	className,
	innerClassName,
	...containerProps
}: BusinessSectionProps) {
	const items = React.Children.toArray(children);
	const hasLogos = items.length > 0;

	const cellDivider =
		"flex min-h-[120px] border-l border-border min-w-32 shrink-0 items-stretch border-r border-border sm:min-w-36";

	const marqueeItems = hasLogos
		? items.map((item, index) => (
				<div
					// biome-ignore lint/suspicious/noArrayIndexKey: sequência estática de logos
					key={`business-logo-${index}`}
					className={cellDivider}
				>
					<div className="flex w-full flex-1 items-center justify-center px-6">
						<div className="flex max-h-10 w-full max-w-36 items-center justify-center text-center text-foreground">
							{item}
						</div>
					</div>
				</div>
			))
		: Array.from({ length: 6 }, (_, i) => (
				<div
					// biome-ignore lint/suspicious/noArrayIndexKey: placeholders estáticos
					key={`business-ph-${i}`}
					className={cellDivider}
				>
					<div className="flex w-full flex-1 items-center justify-center px-4">
						<div
							aria-hidden
							className="h-8 w-20 rounded bg-muted-foreground/15 sm:h-9 sm:w-24"
						/>
					</div>
				</div>
			));

	return (
		<Container
			data-slot="business-section"
			className={cn(className, "w-full")}
			innerClassName={cn("flex flex-col px-0", innerClassName)}
			ruleTop={false}
			ruleBottom={false}
			{...containerProps}
		>
			<div className="flex w-full min-h-[72px] flex-col border-y border-border sm:flex-row">
				<div
					className={cn(
						"flex min-h-[72px] w-[300px] shrink-0 items-center border-r border-border px-5 py-4 sm:max-w-md sm:py-0 sm:pr-8 sm:pl-6 lg:pl-8",
					)}
				>
					<p className="w-full text-balance text-base leading-snug text-foreground">
						{label}
					</p>
				</div>
				<div className="flex min-h-[72px] min-w-0 flex-1 items-stretch">
					<Marquee
						grayscale={grayscale}
						durationSeconds={durationSeconds}
						pauseOnHover
						separator
						className="min-h-[120px] gap-1 flex "
					>
						{marqueeItems}
					</Marquee>
				</div>
			</div>
		</Container>
	);
}