import React from "react";
import { ChevronDown } from "lucide-react";
import { cn } from "@buzzwaretech/utils";

export interface CollapsibleButtonProps {
  isOpen: boolean;
  title: string | React.ReactNode;
  indicatorElement?: React.ReactNode;
  actionItemElement?: React.ReactNode;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  className?: string;
}

export function CollapsibleButton(props: CollapsibleButtonProps) {
  const {
    isOpen,
    title,
    indicatorElement,
    actionItemElement,
    onClick,
    className,
  } = props;

  return (
    <div className={cn("flex w-full items-center justify-between gap-2 py-2", className)}>
      <button
        type="button"
        onClick={onClick}
        className="flex items-center gap-2 text-13 font-medium text-secondary hover:text-primary transition-colors"
      >
        <ChevronDown
          className={cn(
            "h-4 w-4 shrink-0 transition-transform duration-200 text-tertiary",
            !isOpen && "-rotate-90"
          )}
        />
        <span className="select-none">{title}</span>
        {indicatorElement && (
          <div className="flex items-center ml-1">{indicatorElement}</div>
        )}
      </button>

      {actionItemElement && (
        <div className="flex items-center">{actionItemElement}</div>
      )}
    </div>
  );
}

CollapsibleButton.displayName = "buzzwareTech-ui-collapsible-button";