vf_react/src/views/Company/components/CompanyOverview/BasicInfoTab/components/ShareholderPanel.tsx

// src/views/Company/components/CompanyOverview/BasicInfoTab/components/ShareholderPanel.tsx
// 股权结构 Tab Panel - 使用拆分后的子组件

import React from "react";
import { VStack, SimpleGrid, Box } from "@chakra-ui/react";

import { useShareholderData } from "../../hooks/useShareholderData";
import {
  ActualControlCard,
  ConcentrationCard,
  ShareholdersTable,
} from "../../components/shareholder";
import LoadingState from "./LoadingState";

interface ShareholderPanelProps {
  stockCode: string;
}

/**
 * 股权结构面板
 * 使用拆分后的子组件：
 * - ActualControlCard: 实际控制人卡片
 * - ConcentrationCard: 股权集中度卡片
 * - ShareholdersTable: 股东表格（合并版，支持十大股东和十大流通股东）
 */
const ShareholderPanel: React.FC<ShareholderPanelProps> = ({ stockCode }) => {
  const {
    actualControl,
    concentration,
    topShareholders,
    topCirculationShareholders,
    loading,
  } = useShareholderData(stockCode);

  if (loading) {
    return <LoadingState message="加载股权结构数据..." />;
  }

  return (
    <VStack spacing={6} align="stretch">
      {/* 实际控制人 + 股权集中度 左右分布 */}
      <SimpleGrid columns={{ base: 1, lg: 2 }} spacing={6}>
        <Box>
          <ActualControlCard actualControl={actualControl} />
        </Box>
        <Box>
          <ConcentrationCard concentration={concentration} />
        </Box>
      </SimpleGrid>

      {/* 十大股东 + 十大流通股东 左右分布 */}
      <SimpleGrid columns={{ base: 1, lg: 2 }} spacing={6}>
        <Box>
          <ShareholdersTable type="top" shareholders={topShareholders} />
        </Box>
        <Box>
          <ShareholdersTable type="circulation" shareholders={topCirculationShareholders} />
        </Box>
      </SimpleGrid>
    </VStack>
  );
};

export default ShareholderPanel;