import { Modal, Anchor, Text, Box, Group, Divider, ThemeIcon, Space } from '@mantine/core';
import { IconInfoCircle } from '@tabler/icons-react';
import { __ } from '@wordpress/i18n';

export function AboutModal({ aboutModalOpen, setAboutModalOpen }) {

    return (
        <>
            <Modal opened={aboutModalOpen} onClose={() => setAboutModalOpen(false)} centered zIndex={10000}
                title={
                    <Group spacing="xs">
                        <ThemeIcon color="orange" size={36} radius="xl" variant="light">
                            <IconInfoCircle size={24} />
                        </ThemeIcon>
                        <Text fw={600}>{__( 'About LazyTasks', 'lazytasks-project-task-management' )}</Text>
                    </Group>
                }
                radius="lg"
                size="lg"
                overlayProps={{ blur: 2 }}
            >
                <Divider size="xs" my={0} className='!-ml-4 w-[calc(100%+2rem)]' />
                <Box mx="auto" p="md">
                    <Text size="md" mb={4}>{__( 'Version', 'lazytasks-project-task-management' )}: {appLocalizer && appLocalizer.pluginVersion}</Text>
                    <Text size="md" mb={4}>{__( 'Developed by', 'lazytasks-project-task-management' )}: LazyCoders Inc.</Text>
                    <Text size="md" mb={4}>
                        {__( 'Website', 'lazytasks-project-task-management' )}: <Anchor href="https://www.lazycoders.co" target="_blank" c='orange'>www.lazycoders.co</Anchor>
                    </Text>
                    <Text size="md" mb="md">
                        {__( 'LazyTasks is brought to you by LazyCoders Inc., designed to streamline communication and project management. Combining ease of use with powerful features, we\'re committed to enhancing your collaborative experience.', 'lazytasks-project-task-management' )}
                    </Text>
                    <Text size="md" mb={4}>
                        {__( 'For support or feedback, please visit our website or contact us at', 'lazytasks-project-task-management' )} <Space w="sm" />
                        <Anchor href="mailto:support@lazycoders.co" c='orange'>
                            support@lazycoders.co
                        </Anchor>.
                    </Text>
                    <Text size="md" c="dimmed" mt="md">
                        © {new Date().getFullYear()} LazyCoders Inc. All Rights Reserved.
                    </Text>

                </Box>
            </Modal>
        </>
    );
}