import Tabs from '@/components/Tabs';
import { Flex, Progress, Space } from 'antd';
import React, { useState } from 'react';
import styles from './index.less';
const HighFrequencyType: React.FC<{
  categoryStatistics?: any[];
  onTabChange?: (category: string) => void;
}> = ({ categoryStatistics = [], onTabChange }) => {
  const [activeTab, setActiveTab] = useState('mainClass');

  const tabItems = [
    {
      key: 'mainClass',
      label: '大类',
    },
    {
      key: 'subClass',
      label: '小类',
    },
    {
      key: 'subdivisionClass',
      label: '细类',
    },
  ];

  const handleTabChange = (key: string) => {
    setActiveTab(key);
    onTabChange?.(key);
  };

  return (
    <Flex vertical gap={13} className={styles.container}>
      <Flex justify="space-between" align="center">
        <Space>
          <div className={styles.mark}></div>
          <div className={styles.title}>高发类型</div>
        </Space>
        <Tabs
          style={{
            background: 'transparent',
            height: '30px',
          }}
          itemStyle={{
            borderRadius: '25px',
            background: 'rgba(7, 50, 93, 0.8)',
            fontSize: '16px',
            marginLeft: 8,
          }}
          onChange={handleTabChange}
          itemkey={'key'}
          items={[
            {
              key: 'mainClass',
              label: '大类',
            },
            {
              key: 'subClass',
              label: '小类',
            },
            {
              key: 'subdivisionClass',
              label: '细类',
            },
          ]}
        />
      </Flex>

      <div className={styles.wrap}>
        {categoryStatistics.map((item, index) => (
          <div className={styles.litsItem} key={index}>
            <Flex justify="space-between">
              <div className={styles.name}>{item.name}</div>
              <Space size={10} className={styles.numBox}>
                <div className={styles.num}>
                  <span>{item?.value}</span>
                  <span>件</span>
                </div>
                <div className={styles.num}>
                  <span>{item?.percent}</span>
                  <span>%</span>
                </div>
              </Space>
            </Flex>

            <Progress
              size={{ height: 15 }}
              percent={item?.percent}
              showInfo={false}
              strokeColor={{ from: '#79FFD1', to: '#00B9FF' }}
              status="active"
            />
          </div>
        ))}
      </div>
    </Flex>
  );
};

export default HighFrequencyType;
