// src/views/Company/components/CompanyHeader/SearchBar.js
// 股票搜索栏组件

import React from 'react';
import {
  HStack,
  Input,
  Button,
  InputGroup,
  InputLeftElement,
} from '@chakra-ui/react';
import { SearchIcon } from '@chakra-ui/icons';

/**
 * 股票搜索栏组件
 *
 * @param {Object} props
 * @param {string} props.inputCode - 输入框当前值
 * @param {Function} props.onInputChange - 输入变化回调
 * @param {Function} props.onSearch - 搜索按钮点击回调
 * @param {Function} props.onKeyPress - 键盘事件回调
 */
const SearchBar = ({
  inputCode,
  onInputChange,
  onSearch,
  onKeyPress,
}) => {
  return (
    <HStack spacing={3}>
      <InputGroup size="lg" maxW="300px">
        <InputLeftElement pointerEvents="none">
          <SearchIcon color="gray.400" />
        </InputLeftElement>
        <Input
          placeholder="输入股票代码"
          value={inputCode}
          onChange={(e) => onInputChange(e.target.value)}
          onKeyPress={onKeyPress}
          borderRadius="md"
          _focus={{
            borderColor: 'blue.500',
            boxShadow: '0 0 0 1px #3182ce',
          }}
        />
      </InputGroup>
      <Button
        colorScheme="blue"
        size="lg"
        onClick={onSearch}
        leftIcon={<SearchIcon />}
      >
        查询
      </Button>
    </HStack>
  );
};

export default SearchBar;