'use client';


import { cn } from "../../utils/cn.mjs";
import { Button, ButtonColor, ButtonVariant } from "../Button/Button.mjs";
import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
import { useId, useState } from "react";
import { ChevronDown } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/Accordion/Accordion.tsx
/**
* Accordion component that allows the user to expand and collapse content.
* It provides a header with a chevron icon that controls the visibility of the content.
*
* Features:
* - Supports both controlled and uncontrolled modes
* - Accessible with proper ARIA attributes
* - Keyboard navigation support
* - Smooth animations for expand/collapse
* - Customizable styling
*
* @param header - The content of the header.
* @param children - The content to be expanded and collapsed.
* @param isOpen - Controlled state for whether the content is expanded.
* @param defaultIsOpen - Default open state for uncontrolled mode.
* @param onToggle - Callback when the accordion state changes.
* @param disabled - Whether the accordion is disabled.
* @param contentClassName - Custom class for the content container.
* @param headerClassName - Custom class for the header.
* @param contentId - ID for the content (used for aria-controls).
*
* @example
* // Uncontrolled mode
* <Accordion header="Accordion Header" defaultIsOpen={true}>
*   <p>Accordion content</p>
* </Accordion>
*
* @example
* // Controlled mode
* <Accordion
*   header="Controlled Accordion"
*   isOpen={isOpen}
*   onToggle={setIsOpen}
* >
*   <p>Controlled content</p>
* </Accordion>
*/
const Accordion = ({ children, header, isOpen, defaultIsOpen = false, onToggle, onClick, disabled = false, contentClassName, headerClassName, contentId, "aria-label": ariaLabel, ...props }) => {
	const isControlled = isOpen !== void 0;
	const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);
	const id = useId();
	const isExpandedState = isControlled ? isOpen : internalIsOpen;
	const isHidden = !isExpandedState;
	const generatedContentId = contentId ?? `${id}-accordion-content`;
	const handleToggle = (e) => {
		if (disabled) return;
		const newIsOpen = !isExpandedState;
		if (!isControlled) setInternalIsOpen(newIsOpen);
		onToggle?.(newIsOpen);
		onClick?.(e);
	};
	const handleKeyDown = (e) => {
		if (e.key === "Enter" || e.key === " ") {
			e.preventDefault();
			handleToggle(e);
		}
	};
	return /* @__PURE__ */ jsxs("div", {
		className: "w-full",
		children: [/* @__PURE__ */ jsx(Button, {
			variant: ButtonVariant.HOVERABLE,
			color: ButtonColor.TEXT,
			onClick: handleToggle,
			onKeyDown: handleKeyDown,
			disabled,
			isFullWidth: true,
			className: cn("flex items-center justify-between gap-2", headerClassName),
			IconRight: ChevronDown,
			iconClassName: cn("transform transition-transform duration-500 ease-in-out", isExpandedState ? "rotate-0" : "-rotate-180"),
			"aria-expanded": isExpandedState,
			"aria-controls": generatedContentId,
			"aria-label": ariaLabel,
			role: "button",
			...props,
			children: header
		}), /* @__PURE__ */ jsx(MaxHeightSmoother, {
			id: generatedContentId,
			tabIndex: isHidden ? -1 : void 0,
			isHidden,
			className: contentClassName,
			role: "region",
			"aria-labelledby": generatedContentId,
			children
		})]
	});
};

//#endregion
export { Accordion };
//# sourceMappingURL=Accordion.mjs.map