import React from 'react';
import { Box, Text, HStack, Image, Checkbox, List, ListItem, ListIcon } from '@chakra-ui/react';
import { MdCheckCircle } from 'react-icons/md';
import oBenefits from "../../assets/o-benefits.svg";
import oExpense from "../../assets/o-expense.svg";
import oGift from "../../assets/o-gift.svg";

const packages = [
    {
        id: 1,
        img: oExpense, 
        title: "OptiFii Expense",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
        benefits: [
            "Lorem ipsum dolor sit amet",
            "Lorem ipsum dolor sit amet",
            "Lorem ipsum dolor sit amet",
            "Lorem ipsum dolor sit amet"
        ]
    },
    {
        id: 2,
        img: oBenefits,
        title: "OptiFii Benefits",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
        benefits: [
            "Lorem ipsum dolor sit amet",
            "Lorem ipsum dolor sit amet",
            "Lorem ipsum dolor sit amet",
            "Lorem ipsum dolor sit amet"
        ]
    },
    {
        id: 3,
        img: oGift, 
        title: "OptiFii Gift & Vouchers",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
        benefits: [
            "Lorem ipsum dolor sit amet",
            "Lorem ipsum dolor sit amet",
            "Lorem ipsum dolor sit amet",
            "Lorem ipsum dolor sit amet"
        ]
    }
];

const OnboardingSelectPackage = () => {

    return (
        <Box>
            <Text color={'#49475A'} fontWeight={500} fontSize={'sm'} mb={1}>
                Select package
            </Text>
            <Text color={'#49475A'} fontWeight={500} fontSize={'xs'}>
                Lorem ipsum dolor sit amet, adipiscing elit.
            </Text>

            <HStack spacing={4} flexWrap={"wrap"} my={12}>
                {packages.map((pkg) => (
                    <Box
                        key={pkg.id}
                        bg={"linear-gradient(158.69deg, #C33FAD 1.29%, #0A006B 98.23%)"}
                        p={4}
                        borderRadius={"md"}
                        maxW={"260px"}
                    >
                        <HStack justifyContent={"space-between"} alignItems={"start"}>
                            <Image src={pkg.img} alt={`${pkg.title} image`} /> 
                            <Checkbox colorScheme='white'></Checkbox>
                        </HStack>
                        <Text
                            fontSize={"sm"}
                            fontWeight={500}
                            color={"#fff"}
                            mb={0}
                            mt={2}
                        >
                            {pkg.title}
                        </Text>
                        <Text fontSize={"xs"} color={"#e7d4ea"}>
                            {pkg.description}
                        </Text>
                        <Text fontSize={"xs"} color={"#e8d5eb"} mb={2}>
                            This plan gets
                        </Text>
                        <Box bg={"#fff"} borderRadius={"md"} p={4}>
                            <List spacing={3} pl={0} mb={0}>
                                {pkg.benefits.map((benefit, index) => (
                                    <ListItem
                                        key={index}
                                        fontSize={"xs"}
                                        color={"#434343"}
                                        fontWeight={500}
                                    >
                                        <ListIcon as={MdCheckCircle} color='#3725EA'  />
                                        {benefit}
                                    </ListItem>
                                ))}
                            </List>
                        </Box>
                    </Box>
                ))}
            </HStack>
        </Box>
    );
};

export default OnboardingSelectPackage;
