import React from 'react';
import {
  Box,
  Heading,
  Text,
  VStack,
  Icon,
  HStack,
} from '@chakra-ui/react';
import { StarIcon } from '@chakra-ui/icons';

const AnalyticsPanel = () => {
  return (
    <Box p={5} shadow="md" borderWidth="1px" borderRadius="md" bg="gray.50">
      <VStack align="stretch" spacing={4}>
        <HStack>
          <Icon as={StarIcon} w={6} h={6} color="gray.400" />
          <Heading size="md" color="gray.400">
            Analytics & Usage
          </Heading>
        </HStack>
        <Text fontSize="sm" color="gray.500">
          Usage statistics and analytics for your translated content will be displayed here in a future update.
        </Text>
      </VStack>
    </Box>
  );
};

export default AnalyticsPanel;