import { Button, Flex, Space } from 'antd';
import { ReloadOutlined } from '@ant-design/icons';
import { useThemeMode } from '../hooks/useThemeMode';

interface FilterBarProps {
  children: React.ReactNode;
  onReset?: () => void;
  extra?: React.ReactNode;
}

export function FilterBar({ children, onReset, extra }: FilterBarProps) {
  const isDark = useThemeMode();

  return (
    <Flex
      justify="space-between"
      align="center"
      style={{
        padding: '12px 16px',
        background: isDark ? '#1f1f1f' : '#fafafa',
        borderRadius: 8,
        marginBottom: 16,
      }}
    >
      <Space wrap size="middle">
        {children}
      </Space>
      <Space>
        {onReset && (
          <Button icon={<ReloadOutlined />} onClick={onReset}>
            重置
          </Button>
        )}
        {extra}
      </Space>
    </Flex>
  );
}
