"use client"

import * as React from "react"
import { Accordion as BaseAccordion } from "@base-ui/react/accordion"
import { cn } from "@/lib/utils"

export type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof BaseAccordion.Trigger> & {
  className?: string
}

const BaseAccordionTrigger = BaseAccordion.Trigger as React.ElementType

export const AccordionTrigger = React.forwardRef<HTMLElement, AccordionTriggerProps>(
  ({ className, ...props }, ref) => (
    <BaseAccordionTrigger
      ref={ref}
      className={cn(
        "group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none [&:not([data-disabled]):hover]:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:[&:not([data-disabled]):hover]:bg-neutral-800",
        className,
      )}
      {...props}
    />
  ),
)

AccordionTrigger.displayName = "AccordionTrigger"