// src/components/dashboard/pages/RouterManagement.tsx
import React, { useState } from 'react';
import { RouterData, FilterType } from '../../../types';
import { RouterTable } from '../RouterTable';

export const RouterManagement: React.FC = () => {
  const [filter, setFilter] = useState<FilterType>('all');

  return (
    <div className="p-6">
      <div className="bg-white rounded-lg shadow">
        <div className="p-6">
          <h2 className="text-xl font-semibold mb-6">Router Management</h2>
          
          {/* Filter Controls */}
          <div className="mb-4">
            <select
              value={filter}
              onChange={(e) => setFilter(e.target.value as FilterType)}
              className="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="all">All Routers</option>
              <option value="active">Active</option>
              <option value="critical">Critical</option>
              <option value="diskAlert">Disk Alert</option>
            </select>
          </div>

          {/* Router Table Component */}
          <RouterTable 
            filter={filter}
            onFilterChange={setFilter}
          />
        </div>
      </div>
    </div>
  );
};

export default RouterManagement;