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

/**
 * 特性卡片
 * @param title 标题
 * @param description 描述
 * @param buttonText 按钮文字
 * @param to 转向
 * @param disabled 按钮是否可用
 * @returns {JSX.Element}
 * @constructor
 */
const FeatureCard = ({ title, description, buttonText, to, disabled }) => (
  <Box
    p={6}
    bg={'whiteAlpha.100'}
    borderRadius={'xl'}
    border={'1px solid'}
    borderColor={'whiteAlpha.300'}
    transition={'all 0.2s'}
    _hover={{ transform: 'translateY(-4px)' }}
  >
    <Text fontSize={'xl'} fontWeight={'bold'} color={'white'} mb={2}>
      {title}
    </Text>
    <Text color={'gray.300'} mb={4}>
      {description}
    </Text>
    <Button
      colorPalette={'blue'}
      variant={'solid'}
      isDisabled={disabled}
      onClick={() => {
        if (to) window.location.href = to;
      }}
    >
      {buttonText}
    </Button>
  </Box>
);

export default FeatureCard;
