import React, { useState } from 'react';
import { Search } from 'lucide-react';


const FilterBar = ({ 
  searchTerm, 
  setSearchTerm, 
  filterStatus, 
  setFilterStatus, 
  filterRequirement, 
  setFilterRequirement,
  filteredCount,
  totalCount,
  morbCount,
  internalCount
}) => {
  return (
    <div className="bg-white border-b border-gray-200 px-6 py-4">
      <div className="flex flex-wrap items-center gap-4">
        {/* Search */}
        <div className="flex-1 min-w-80">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
            <input
              type="text"
              placeholder="Search by name or definition..."
              className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
        </div>

        {/* Status Filter */}
        <div className="min-w-48">
          <select
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            value={filterStatus}
            onChange={(e) => setFilterStatus(e.target.value)}
          >
            <option value="all">All Status</option>
            <option value="Not Started">Not Started</option>
            <option value="In Progress">In Progress</option>
            <option value="Under Review">Under Review</option>
            <option value="Completed">Completed</option>
          </select>
        </div>

        {/* Requirement Filter */}
        <div className="min-w-48">
          <select
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            value={filterRequirement}
            onChange={(e) => setFilterRequirement(e.target.value)}
          >
            <option value="all">All Requirements</option>
            <option value="morb">MORB Required</option>
            <option value="internal">Internal Policies</option>
          </select>
        </div>

        {/* Stats Summary */}
        <div className="flex items-center space-x-6 text-sm text-gray-600 ml-auto">
          <div className="flex items-center">
            <span className="font-medium text-gray-900">{filteredCount}</span>
            <span className="ml-1">of {totalCount} documents</span>
          </div>
          <div className="flex items-center">
            <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800 mr-1">
              MORB
            </span>
            <span className="font-medium text-gray-900">{morbCount}</span>
          </div>
          <div className="flex items-center">
            <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800 mr-1">
              Internal
            </span>
            <span className="font-medium text-gray-900">{internalCount}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default FilterBar;
