PaymentSuccess.jsx

import {
  Box,
  Button,
  Container,
  Heading,
  Text,
  VStack,
} from '@chakra-ui/react'; // Chakra UI components for layout and styling
import React from 'react'; // React library
import { RiCheckboxCircleFill } from 'react-icons/ri'; // Icon for success indication
import { Link, useSearchParams } from 'react-router-dom'; // For routing and accessing URL parameters

const PaymentSuccess = () => {
  // Extract the 'reference' parameter from the URL search params
  const reference = useSearchParams()[0].get('reference');

  return (
    <Container h="90vh" p="16"> {/* Main container with height and padding */}
      <Heading my="8" textAlign={'center'}>
        You have Pro Pack {/* Main heading */}
      </Heading>

      <VStack boxShadow={'lg'} pb="16" alignItems={'center'} borderRadius="lg"> {/* Vertical stack for layout */}
        <Box
          w="full"
          bg="yellow.400" // Background color for the success message
          p="4"
          css={{ borderRadius: '8px 8px 0 0' }} // Rounded corners for top box
        >
          <Text color={'black'}>Payment Success</Text> {/* Success message */}
        </Box>

        <Box p="4"> {/* Container for congratulatory message */}
          <VStack textAlign={'center'} px="8" mt="4" spacing={'8'}>
            <Text>
              Congratulations! You're a pro member. You have access to premium content.
            </Text>

            <Heading size={'4xl'}>
              <RiCheckboxCircleFill /> {/* Success icon */}
            </Heading>
          </VStack>
        </Box>

        <Link to="/profile"> {/* Link to the profile page */}
          <Button variant={'ghost'}>Go to profile</Button> {/* Button to navigate */}
        </Link>

        <Heading size={'xs'}>Reference: {reference}</Heading> {/* Display payment reference */}
      </VStack>
    </Container>
  );
};

export default PaymentSuccess;