'use client';

import React from 'react';
import { Filter, RefreshCw } from 'lucide-react';

interface MobileFilterButtonProps {
  readonly filteredCount: number;
  readonly totalCount: number;
  readonly isRefreshing: boolean;
  readonly onFilterClick: () => void;
  readonly onRefresh: () => void;
  readonly extraButton?: React.ReactNode;
}

export function MobileFilterButton({
  filteredCount,
  totalCount,
  isRefreshing,
  onFilterClick,
  onRefresh,
  extraButton,
}: MobileFilterButtonProps) {
  const hasActiveFilters = filteredCount !== totalCount;

  return (
    <div className="absolute top-4 left-4 z-20 lg:hidden">
      <div className="flex flex-col gap-2">
        <div className="flex gap-2">
          <button
            onClick={onFilterClick}
            className={`relative p-3 rounded-xl shadow-lg border transition-all duration-200 active:scale-95 ${
              hasActiveFilters
                ? 'bg-brand-600 text-white border-brand-600 hover:bg-brand-500'
                : 'bg-brand-50 text-brand-700 border-brand-100 hover:bg-brand-100 dark:bg-gray-800 dark:text-brand-300'
            }`}
            aria-label="Open filters"
          >
            <Filter className="w-5 h-5" />
            {hasActiveFilters && (
              <div className="absolute -top-1 -left-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center">
                <span className="text-xs font-bold text-white">
                  {totalCount - filteredCount > 9 ? '9+' : totalCount - filteredCount}
                </span>
              </div>
            )}
          </button>
          <button
            onClick={onRefresh}
            disabled={isRefreshing}
            className="p-3 rounded-xl shadow-lg border bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 transition-all duration-200 active:scale-95 disabled:opacity-50"
            aria-label="Refresh stations"
          >
            <RefreshCw className={`w-5 h-5 ${isRefreshing ? 'animate-spin' : ''}`} />
          </button>
          {extraButton && (
            <div className="p-0">{extraButton}</div>
          )}
        </div>
      </div>
    </div>
  );
}