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";