import { Center, Stack, Text } from '@mantine/core'

interface NotFoundStateProps {
  title?: string
  description?: string
}

export function NotFoundState({
  title = 'Page not found',
  description = "The resource you're looking for doesn't exist or has been removed.",
}: NotFoundStateProps) {
  return (
    <Center flex={1}>
      <Stack
        align="center"
        justify="center"
        gap="xs"
        py="xl"
        style={{ minHeight: '60vh', width: '100%' }}
      >
        <Text
          style={{
            fontSize: 72,
            lineHeight: 1,
            letterSpacing: '-0.06em',
            fontWeight: 600,
          }}
        >
          404
        </Text>
        <Text size="xl" fw={600}>
          {title}
        </Text>
        <Text ta="center" maw={520} c="dimmed">
          {description}
        </Text>
      </Stack>
    </Center>
  )
}