infoalloggi-monorepo/apps/infoalloggi/src/components/accordionComp.tsx

import { forwardRef, type InputHTMLAttributes } from "react";
import {
	Accordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "~/components/ui/accordion";
import type { Faq } from "~/i18n/locales";
import { cn } from "~/lib/utils";

interface AccordionCompProps extends InputHTMLAttributes<HTMLDivElement> {
	texts: Faq[];
}

/**
 * Renders an accordion component with collapsible items.
 *
 * @component
 * @example
 * ```tsx
 * <AccordionComp
 *   texts={[
 *     { title: "Item 1", description: "Description for Item 1" },
 *     { title: "Item 2", description: "Description for Item 2" },
 *     { title: "Item 3", description: "Description for Item 3" },
 *   ]}
 *   className="my-4"
 * />
 * ```
 */
export const AccordionComp = forwardRef<HTMLDivElement, AccordionCompProps>(
	({ texts, className }, ref) => {
		if (!texts || texts.length === 0) {
			return null; // Return null if no texts are provided
		}
		return (
			<div
				className={cn("mx-auto flex max-w-xl justify-center", className)}
				ref={ref}
			>
				<Accordion type="single" collapsible className="w-full">
					{texts.map((text, index) => (
						<AccordionItem key={`ac-item-${index}`} value={`item-${index}`}>
							<AccordionTrigger className="cursor-pointer gap-4 text-left text-lg">
								{text.title}
							</AccordionTrigger>
							<AccordionContent className="text-base">
								{text.description}
							</AccordionContent>
						</AccordionItem>
					))}
				</Accordion>
			</div>
		);
	},
);

AccordionComp.displayName = "AccordionComp";