import { Box, Title, Text, Button, Group, Stack, useMantineTheme } from '@mantine/core';
import { ArrowLeft } from 'phosphor-react'; // ← Importa el icono directamente
import { Link } from 'react-router-dom';
import { MantineCardWithShader } from './HoloShader_404';
import { AppShellWithMenu } from '../Appshell/Appshell';

export function Error_404() {
  const theme = useMantineTheme();

  return (
    <AppShellWithMenu>
      <Box
        style={{
          flex: 1,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'flex-start',
          padding: '2rem',
          paddingTop: '0.5rem',
        }}
      >
        <Box
          style={{
            flex: 1,
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            padding: '2rem',
          }}
        >
          <Stack align="center" maw={500} mx="auto">
            <MantineCardWithShader />
            <Title order={1}>Página no encontrada</Title>
            <Text size="lg">
              Parece que la página que estás buscando no existe o fue removida. Pero no te preocupes,
              puedes volver al inicio fácilmente.
            </Text>
            <Group mt="md">
              <Button
                component={Link}
                to="/"
                size="md"
                variant="gradient"
                gradient={{
                  from: theme.colors.brand[7],
                  to: theme.colors.secondary[4],
                }}
                leftSection={<ArrowLeft size={18} />} // ← Usa el icono Phosphor aquí
              >
                Volver al inicio
              </Button>
            </Group>
          </Stack>
        </Box>
      </Box>
    </AppShellWithMenu>
  );
}