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

/** Chevron button that shows or hides a dashboard section. */
export function CollapseToggle({ collapsed, onToggle, label, controls }: { collapsed: boolean; onToggle: () => void; label: string; controls: string }) {
  return (
    <button
      type="button"
      onClick={onToggle}
      aria-expanded={!collapsed}
      aria-controls={controls}
      aria-label={`${collapsed ? "Show" : "Hide"} ${label}`}
      className="inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
    >
      <ChevronDown size={16} strokeWidth={1.5} className={cn("transition-transform duration-200", collapsed && "-rotate-90")} />
    </button>
  );
}