import {
  Flex,
  Container,
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  Text
} from '@chakra-ui/react';
import { ChevronRightIcon } from '@chakra-ui/icons';
import React from 'react';
import SubscriptionContentNew from 'components/Subscription/SubscriptionContentNew';

function Subscription() {
  return (
    <Flex direction='column' bg='#0a0a0a' minH='100vh'>
      <Container maxW="container.xl" px={{ base: 4, md: 6 }} py={{ base: 4, md: 6 }}>
        {/* 面包屑导航 */}
        <Breadcrumb
          spacing='8px'
          separator={<ChevronRightIcon color='gray.500' />}
          mb={6}
          fontSize='sm'
        >
          <BreadcrumbItem>
            <BreadcrumbLink href='/home' color='gray.400' _hover={{ color: '#D4AF37' }}>首页</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbItem>
            <BreadcrumbLink href='/home/pages/account' color='gray.400' _hover={{ color: '#D4AF37' }}>个人中心</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbItem isCurrentPage>
            <Text color='#D4AF37'>订阅管理</Text>
          </BreadcrumbItem>
        </Breadcrumb>

        <SubscriptionContentNew />
      </Container>
    </Flex>
  );
}

export default Subscription;