"use client";

import { XMarkIcon } from "@heroicons/react/24/outline";
import { cn } from "@/shared/utils";

export interface ClearFiltersButtonProps {
  /** Callback when button is clicked */
  onClick: () => void;
  /** Whether the button should be visible (typically when filters are active) */
  show?: boolean;
  /** Optional label text (default: "Clear") */
  label?: string;
  /** Optional additional class names */
  className?: string;
}

/**
 * ClearFiltersButton - Reusable clear filters button with consistent styling.
 *
 * Used across list pages (Orders, Support, Invoices) to reset filters.
 * Only renders when `show` is true (defaults to true).
 */
export function ClearFiltersButton({
  onClick,
  show = true,
  label = "Clear",
  className,
}: ClearFiltersButtonProps) {
  if (!show) return null;

  return (
    <button
      onClick={onClick}
      className={cn(
        "flex items-center gap-1 px-3 py-2 text-sm",
        "text-muted-foreground hover:text-foreground hover:bg-muted",
        "rounded-lg transition-colors",
        className
      )}
    >
      <XMarkIcon className="h-4 w-4" />
      <span className="hidden sm:inline">{label}</span>
    </button>
  );
}
