import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
    Accordion as SAccordion,
} from "./ui/accordion";

type AccordionItemProps = {
  trigger: React.ReactNode;
  content: React.ReactNode;
};

type AccordionProps = {
  icon: IconDefinition;
  items: AccordionItemProps[] | AccordionItemProps;
};
export default function Acordion({ icon, items }: AccordionProps) {
  const [type, arr] = Array.isArray(items)
    ? ["multiple", items]
    : ["single", [items]];

  return (
    <SAccordion type={type as any} collapsible asChild>
      <div>
        {arr.map((item, i) => (
          <AccordionItem value={`item-${i}`} key={i}>
            <AccordionTrigger
              className="w-full py-0 hover:no-underline [&[data-state=open]_.acordion-icon]:rotate-90"
              style={{ fontSize: "unset" }}
            >
              {item.trigger}
              <FontAwesomeIcon
                size="xs"
                className="acordion-icon h-3 w-3 duration-300"
                icon={icon}
              />
            </AccordionTrigger>
            <AccordionContent className="mt-1 border-t p-0 pt-1">
              {item.content}
            </AccordionContent>
          </AccordionItem>
        ))}
      </div>
    </SAccordion>
  );
}