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

const accordionItemVariants = cva({
  base: "rounded-md border-b",
  variants: {
    variant: {
      accent: "border-accent/20",
      primary: "border-primary/20",
      outline: "border-accent",
      muted: "border-muted/20",
      none: "border-0",
    },
  },
  defaultVariants: {
    variant: "primary",
  },
});

export type AccordionItemProps = React.ComponentPropsWithoutRef<
  typeof AccordionPrimitive.Item
> &
  VariantProps<typeof accordionItemVariants>;

export const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  AccordionItemProps
>(({ className, variant, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cx(accordionItemVariants({ variant, className }))}
    {...props}
  />
));

AccordionItem.displayName = "AccordionItem";