import type { VariantProps } from "@karma/cva";
import { cva, cx } from "@karma/cva";
import { ChevronDownIcon } from "@karma/icon";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import React from "react";

const accordionTriggerVariants = cva({
  base: "flex flex-1 items-center justify-between px-2 py-4 font-medium transition-all [&[data-state=open]>svg]:rotate-180",

  variants: {
    variant: {
      accent: "hover:text-primary",
      primary: "hover:text-accent",
      outline: "hover:bg-accent hover:text-secondary",
      muted: "hover:text-muted",
      none: "",
    },
  },
  defaultVariants: {
    variant: "primary",
  },
});

export type AccordionTriggerProps = React.ComponentPropsWithoutRef<
  typeof AccordionPrimitive.Trigger
> &
  VariantProps<typeof accordionTriggerVariants> & {
    icon?: React.ReactNode;
    needIcon?: boolean;
  };

export const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  AccordionTriggerProps
>(({ className, children, variant, icon, needIcon = true, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cx(accordionTriggerVariants({ variant, className }))}
      {...props}
    >
      {children}
      {needIcon &&
        (icon ? (
          icon
        ) : (
          <ChevronDownIcon className="h-2 w-2 shrink-0 transition-transform duration-200" />
        ))}
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
));

AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;