import { Icon } from '@/ui/Icon';
import { Input } from '@/ui/Input';
import { ControlBar } from '@/ui/ControlBar';
import { Button } from '@/ui/Button';
import { Group } from '@/ui/Group';
import { Filter, Search } from 'lucide-react';
import React from 'react';

interface LeaderboardFiltersBarProps {
  searchQuery?: string;
  onSearchChange?: (query: string) => void;
  placeholder?: string;
  children?: React.ReactNode;
}

export function LeaderboardFiltersBar({
  searchQuery,
  onSearchChange,
  placeholder = 'Search drivers...',
  children,
}: LeaderboardFiltersBarProps) {
  return (
    <ControlBar
      leftContent={
        <Group fullWidth>
          <Input
            type="text"
            value={searchQuery}
            onChange={(e) => onSearchChange?.(e.target.value)}
            placeholder={placeholder}
            icon={<Icon icon={Search} size={4} intent="low" />}
            fullWidth
          />
        </Group>
      }
    >
      <Group gap={4}>
        {children}
        <Button
          variant="secondary"
          size="sm"
          icon={<Icon icon={Filter} size={3.5} intent="low" />}
        >
          Filters
        </Button>
      </Group>
    </ControlBar>
  );
}
