'use client';

import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Input } from '@/ui/Input';
import { Select } from '@/ui/Select';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Filter, Search } from 'lucide-react';
import { AdminToolbar } from './AdminToolbar';
import React from 'react';

interface UserFiltersProps {
  search: string;
  roleFilter: string;
  statusFilter: string;
  onSearch: (search: string) => void;
  onFilterRole: (role: string) => void;
  onFilterStatus: (status: string) => void;
  onClearFilters: () => void;
}

export function UserFilters({
  search,
  roleFilter,
  statusFilter,
  onSearch,
  onFilterRole,
  onFilterStatus,
  onClearFilters,
}: UserFiltersProps) {
  return (
    <AdminToolbar
      leftContent={
        <Group gap={3}>
          <Icon icon={Filter} size={4} intent="low" />
          <Text weight="medium" variant="high">Filters</Text>
          {(search || roleFilter || statusFilter) && (
            <Button
              onClick={onClearFilters}
              variant="ghost"
              size="sm"
            >
              Clear all
            </Button>
          )}
        </Group>
      }
    >
      <Box width="18.75rem">
        <Input
          type="text"
          placeholder="Search by email or name..."
          value={search}
          onChange={(e) => onSearch(e.target.value)}
          fullWidth
        />
      </Box>

      <Select
        value={roleFilter}
        onChange={(e) => onFilterRole(e.target.value)}
        options={[
          { value: '', label: 'All Roles' },
          { value: 'owner', label: 'Owner' },
          { value: 'admin', label: 'Admin' },
          { value: 'user', label: 'User' },
        ]}
      />

      <Select
        value={statusFilter}
        onChange={(e) => onFilterStatus(e.target.value)}
        options={[
          { value: '', label: 'All Status' },
          { value: 'active', label: 'Active' },
          { value: 'suspended', label: 'Suspended' },
          { value: 'deleted', label: 'Deleted' },
        ]}
      />
    </AdminToolbar>
  );
}
