/* eslint-disable -- temporary disable for development/testing purposes */
'use client';

import * as React from 'react';
import {
  Card,
  InputAdornment,
  OutlinedInput,
  Stack,
} from '@mui/material';
import { MagnifyingGlass as MagnifyingGlassIcon } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass';

interface CustomersFiltersProps {
  searchQuery: string;
  status: string;
  company: string;
  // companies: string[];
  onSearchChange: (value: string) => void;
  onStatusChange: (value: string) => void;
  onCompanyChange: (value: string) => void;
}

export function CustomersFilters({
  searchQuery,
  // status,
  // company,
  // companies,
  onSearchChange,
  // onStatusChange,
  // onCompanyChange,
}: CustomersFiltersProps): React.JSX.Element {
  return (
    <Card sx={{ p: 2 }}>
      <Stack spacing={2} direction={{ xs: 'column', sm: 'row' }}>
        <OutlinedInput
          value={searchQuery}
         
          onChange={(e) => {
            onSearchChange(e.target.value);
          }}

          fullWidth
          placeholder="Search provider"
          startAdornment={
            <InputAdornment position="start">
              <MagnifyingGlassIcon fontSize="var(--icon-fontSize-md)" />
            </InputAdornment>
          }
          sx={{ maxWidth: '300px' }}
        />

        {/* <FormControl sx={{ minWidth: 160 }}>
          <InputLabel>Status</InputLabel>
          <Select
            value={status}
            label="Status"
            onChange={(e) => onStatusChange(e.target.value)}
          >
            <MenuItem value="">All</MenuItem>
            <MenuItem value="active">Active</MenuItem>
            <MenuItem value="inactive">Inactive</MenuItem>
          

            
            
          </Select>
        </FormControl> */}

        {/* <FormControl sx={{ minWidth: 200 }}>
          <InputLabel>Company</InputLabel>
          <Select
            value={company}
            label="Company"
            onChange={(e) => onCompanyChange(e.target.value)}
          >
            <MenuItem value="">All</MenuItem>
            {companies.map((comp, idx) => (
              <MenuItem key={idx} value={comp}>
                {comp}
              </MenuItem>
            ))}
          </Select>
        </FormControl> */}
      </Stack>
    </Card>
  );
}