import { IconGauge, IconLock, IconMessage2, IconServer, IconUser, IconUsersGroup, type TablerIcon } from '@tabler/icons-react';
import { Container, Flex, SimpleGrid, Text, ThemeIcon, Title } from '@mantine/core';
import type { ReactNode } from 'react';
import classes from './FeaturesGrid.module.css';
import { RosettaLogo } from '../RosettaLogo/RosettaLogo';

const MOCKDATA = [
    {
        icon: IconGauge,
        title: 'Performance',
        description:
            'Despite encryption, the messenger remains fast and convenient.',
    },
    {
        icon: IconUser,
        title: 'Privacy focused',
        description:
            'We encrypt everything, even media files, so that no one can access your files.',
    },
    {
        icon: IconServer,
        title: 'Server does not save messages',
        description:
            'The server does not store messages. All messages are stored only on your devices.',
    },
    {
        icon: IconLock,
        title: 'Secure by default',
        description:
            'The messenger uses asymmetric encryption to hide message keys. ChaCha20 is used for message encryption, and AES-256 is used for encrypting your media files.',
    },
    {
        icon: IconMessage2,
        title: 'Regular Updates',
        description:
            'We strive to update the messenger as often as possible to fix bugs and add new features. This is not an abandoned project.',
    },
    {
        icon: IconUsersGroup,
        title: 'No trackers or ads',
        description:
            'Registration without phone number, email, or other personal data. Only public or private keys. We do not use trackers and do not show ads.',
    }
];

interface FeatureProps {
    icon: TablerIcon;
    title: ReactNode;
    description: ReactNode;
}

export function Feature({ icon: Icon, title, description }: FeatureProps) {
    return (
        <div>
            <ThemeIcon variant="light" size={40} radius={40}>
                <Icon size={18} stroke={1.5} />
            </ThemeIcon>
            <Text mt="sm" mb={7}>
                {title}
            </Text>
            <Text size="sm" c="dimmed" lh={1.6}>
                {description}
            </Text>
        </div>
    );
}

export function FeaturesGrid() {
    const features = MOCKDATA.map((feature, index) => <Feature {...feature} key={index} />);

    return (
        <div className={classes.wrapper}>
            <Container>
                <Flex justify={'center'} mb={'lg'} align={'center'}>
                    <RosettaLogo size={50}></RosettaLogo>
                </Flex>
                <Title ta="center" className={classes.title}>
                    Here’s what we offer
                </Title>

                <Container size={560} p={0}>
                    <Text size="sm" className={classes.description}>
                        Rosetta offers a wide range of features that ensure security, privacy, and ease of use. Explore the key features that make Rosetta an excellent choice for messaging.
                    </Text>
                </Container>

                <SimpleGrid
                    mt={60}
                    cols={{ base: 1, sm: 2, md: 3 }}
                    spacing={{ base: 'xl', md: 50 }}
                    verticalSpacing={{ base: 'xl', md: 50 }}
                >
                    {features}
                </SimpleGrid>
            </Container>
        </div>
    );
}