import * as React from "react";
import { cn } from "@/lib/utils";

const Accordion = ({
  children,
  className,
}: React.ComponentProps<"div">) => {
  return <div className={cn("w-full", className)}>{children}</div>;
};

const AccordionItem = ({
  children,
  className,
}: React.ComponentProps<"div">) => {
  return <div className={cn("border-b", className)}>{children}</div>;
};

const AccordionTrigger = ({
  children,
  className,
  onClick,
}: React.ComponentProps<"button">) => {
  return (
    <button
      className={cn(
        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
        className
      )}
      onClick={onClick}
      type="button"
    >
      {children}
    </button>
  );
};

const AccordionContent = ({
  children,
  className,
}: React.ComponentProps<"div">) => {
  return (
    <div className={cn("pb-4 pt-0 text-sm", className)}>{children}</div>
  );
};

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
