import React from "react";
import { Calendar } from "lucide-react";

interface ActiveFiltersDisplayProps {
  fromDate: string;
  toDate: string;
  onClear: () => void;
}

export const ActiveFiltersDisplay: React.FC<ActiveFiltersDisplayProps> = ({
  fromDate,
  toDate,
  onClear,
}) => {
  if (!fromDate && !toDate) {
    return null;
  }

  return (
    <div className="mb-4 px-4 py-3 rounded-lg bg-blue-50 border border-blue-200">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Calendar className="h-4 w-4 text-blue-600" />
          <span className="text-sm font-medium text-blue-900">
            Active Filters:
            {fromDate && <span className="ml-2">From: {fromDate}</span>}
            {toDate && <span className="ml-2">To: {toDate}</span>}
          </span>
        </div>
        <button
          onClick={onClear}
          className="text-xs font-medium text-blue-700 hover:text-blue-900 underline"
        >
          Clear Filters
        </button>
      </div>
    </div>
  );
};