'use client';

import { Input } from '@/ui/Input';
import { ControlBar } from '@/ui/ControlBar';
import { Select } from '@/ui/Select';
import { Text } from '@/ui/Text';
import { ButtonGroup } from '@/ui/ButtonGroup';
import { useState } from 'react';

export function ActionFiltersBar() {
  const [filter, setFilter] = useState('all');
  
  return (
    <ControlBar
      leftContent={
        <Input 
          placeholder="SEARCH_ID..." 
        />
      }
    >
      <ButtonGroup gap={4}>
        <ButtonGroup gap={2}>
          <Text size="xs" variant="low" weight="bold" uppercase>Filter:</Text>
          <Select 
            options={[
              { label: 'All Types', value: 'all' },
              { label: 'User Update', value: 'user' },
              { label: 'Onboarding', value: 'onboarding' }
            ]}
            value={filter}
            onChange={(e) => setFilter(e.target.value)}
            fullWidth={false}
          />
        </ButtonGroup>
        <ButtonGroup gap={2}>
          <Text size="xs" variant="low" weight="bold" uppercase>Status:</Text>
          <Select 
            options={[
              { label: 'All Status', value: 'all' },
              { label: 'Completed', value: 'completed' },
              { label: 'Pending', value: 'pending' },
              { label: 'Failed', value: 'failed' }
            ]}
            value="all"
            onChange={() => {}}
            fullWidth={false}
          />
        </ButtonGroup>
      </ButtonGroup>
    </ControlBar>
  );
}
