// src/views/Company/components/CompanyHeader/index.js
// 公司详情页面头部区域组件

import React from 'react';
import {
  Card,
  CardBody,
  HStack,
  VStack,
  Heading,
  Text,
} from '@chakra-ui/react';

import SearchBar from './SearchBar';

/**
 * 公司详情页面头部区域组件
 *
 * 包含：
 * - 页面标题和描述（金色主题）
 * - 股票搜索栏（支持模糊搜索）
 *
 * @param {Object} props
 * @param {string} props.inputCode - 搜索输入框值
 * @param {Function} props.onInputChange - 输入变化回调
 * @param {Function} props.onSearch - 搜索回调
 * @param {Function} props.onKeyDown - 键盘事件回调
 * @param {string} props.bgColor - 背景颜色
 */
const CompanyHeader = ({
  inputCode,
  onInputChange,
  onSearch,
  onKeyDown,
  bgColor,
}) => {
  return (
    <Card bg={bgColor} shadow="md">
      <CardBody>
        <HStack justify="space-between" align="center">
          {/* 标题区域 - 金色主题 */}
          <VStack align="start" spacing={1}>
            <Heading size="lg" color="#F4D03F">个股详情</Heading>
            <Text color="#C9A961" fontSize="sm">
              查看股票实时行情、财务数据和盈利预测
            </Text>
          </VStack>

          {/* 搜索栏 */}
          <SearchBar
            inputCode={inputCode}
            onInputChange={onInputChange}
            onSearch={onSearch}
            onKeyDown={onKeyDown}
          />
        </HStack>
      </CardBody>
    </Card>
  );
};

export default CompanyHeader;