import { Box, Stat } from '@chakra-ui/react';
import React from 'react';

/**
 * 状态卡片
 * @param title 标题
 * @param value 内容
 * @param suffix 交换机数目
 * @param isTime 扫描时间
 * @returns {JSX.Element}
 * @constructor
 */
const StatCard = ({ title, value, suffix, isTime }) => (
  <Box
    p={6}
    bg={'whiteAlpha.100'}
    borderRadius={'xl'}
    border={'1px solid'}
    borderColor={'whiteAlpha.300'}
    transition={'all 0.2s'}
    _hover={{ transform: 'translateY(-4px)' }}
  >
    <Stat.Root colorPalette={'teal'}>
      <Stat.Label>{title}</Stat.Label>
      <Stat.ValueText>{`${value}${suffix ? ` ${suffix}` : ''}`}</Stat.ValueText>
      {isTime && <Stat.HelpText>{`上次扫描时间`}</Stat.HelpText>}
    </Stat.Root>
  </Box>
);

export default StatCard;
