import { Anchor, Text, Title, Button, Group } from '@mantine/core';
import { Link } from 'react-router-dom';
import classes from './Welcome.module.css';

export function Welcome() {
  return (
    <>
      <Title className={classes.title} ta="center" mt={100}>
        Welcome to{' '}
        <Text inherit variant="gradient" component="span" gradient={{ from: 'pink', to: 'yellow' }}>
          Mantine
        </Text>
      </Title>
      <Text c="dimmed" ta="center" size="lg" maw={580} mx="auto" mt="xl">
        Esta aplicación incluye una implementación completa de DockView con Mantine. Los docks se pueden
        mover, redimensionar e interactuar entre ellos proporcionando una experiencia de interfaz modular.
      </Text>

      <Group justify="center" mt="xl" gap="md">
        <Button
          component={Link}
          to="/dockview"
          size="lg"
          variant="gradient"
          gradient={{ from: 'pink', to: 'yellow' }}
        >
          DockView Simple
        </Button>

        <Button
          component={Link}
          to="/vscode-layout"
          size="lg"
          variant="gradient"
          gradient={{ from: 'blue', to: 'cyan' }}
        >
          VSCode Layout
        </Button>
      </Group>
    </>
  );
}
