"use client";

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

export interface FilterOption {
  value: string;
  label: string;
}

export interface FilterDropdownProps {
  /** Current selected value */
  value: string;
  /** Callback when value changes */
  onChange: (value: string) => void;
  /** Array of filter options */
  options: FilterOption[];
  /** Accessible label for the dropdown */
  label: string;
  /** Optional width class (default: "w-40") */
  width?: string;
  /** Optional additional class names */
  className?: string;
}

/**
 * FilterDropdown - Reusable filter dropdown component with consistent styling.
 *
 * Used across list pages (Orders, Support, Invoices) for filtering by status, type, priority, etc.
 */
export function FilterDropdown({
  value,
  onChange,
  options,
  label,
  width = "w-40",
  className,
}: FilterDropdownProps) {
  return (
    <div className={cn("relative", className)}>
      <select
        value={value}
        onChange={event => onChange(event.target.value)}
        className={cn(
          "block pl-3 pr-8 py-2.5 text-sm border border-border",
          "focus:outline-none focus:ring-2 focus:ring-ring focus:border-primary",
          "rounded-lg appearance-none bg-card text-foreground",
          "shadow-sm cursor-pointer transition-colors",
          width
        )}
        aria-label={label}
      >
        {options.map(option => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      <div className="absolute inset-y-0 right-0 flex items-center pr-2.5 pointer-events-none">
        <FunnelIcon className="h-4 w-4 text-muted-foreground" />
      </div>
    </div>
  );
}
