// src/components/Subscription/SubscriptionModal.js
import React from 'react';
import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalCloseButton,
  Icon,
  HStack,
  Text,
  useColorModeValue,
} from '@chakra-ui/react';
import { FiStar } from 'react-icons/fi';
import PropTypes from 'prop-types';
import SubscriptionContent from './SubscriptionContent';

export default function SubscriptionModal({ isOpen, onClose }) {
  return (
    <Modal isOpen={isOpen} onClose={onClose} size="4xl" isCentered scrollBehavior="inside">
      <ModalOverlay backdropFilter="blur(4px)" />
      <ModalContent maxH="90vh">
        <ModalHeader borderBottomWidth="1px" borderColor={useColorModeValue('gray.200', 'gray.600')}>
          <HStack>
            <Icon as={FiStar} color="blue.500" boxSize={5} />
            <Text>订阅管理</Text>
          </HStack>
        </ModalHeader>
        <ModalCloseButton />
        <ModalBody py={6}>
          <SubscriptionContent />
        </ModalBody>
      </ModalContent>
    </Modal>
  );
}

SubscriptionModal.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
};