// src/views/Home/components/HeroHeader.tsx
// 首页主标题区域组件

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

interface HeroHeaderProps {
  headingSize: string | undefined;
  headingLetterSpacing: string | undefined;
  heroTextSize: string | undefined;
}

/**
 * 首页主标题区域组件
 * 包含主标题和副标题
 */
export const HeroHeader: React.FC<HeroHeaderProps> = ({
  headingSize,
  headingLetterSpacing,
  heroTextSize
}) => {
  return (
    <VStack
      spacing={{ base: 2, md: 3, lg: 4 }}
      textAlign="center"
      pt={{ base: 2, md: 4, lg: 5 }}
    >
      <Heading
        size={headingSize}
        color="white"
        fontWeight="900"
        letterSpacing={headingLetterSpacing}
        lineHeight="shorter"
      >
        智能投资分析平台
      </Heading>
      <Text
        fontSize={heroTextSize}
        color="whiteAlpha.800"
        maxW={{ base: '100%', md: 'xl', lg: '2xl' }}
        lineHeight="tall"
        px={{ base: 2, md: 0 }}
      >
        专业投资研究工具,助您把握市场机遇
      </Text>
    </VStack>
  );
};