import { View, Text, Pressable } from "react-native";
import { useRouter } from "expo-router";
import { useTheme } from "../components/theme";

export default function NotFound() {
  const theme = useTheme();
  const router = useRouter();

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center", backgroundColor: theme.colors.background, padding: theme.spacing.lg }}>
      <Text accessible accessibilityLabel="Страницата не е пронајдена" style={{ fontSize: 24, fontWeight: "700", color: theme.colors.text, marginBottom: theme.spacing.sm }}>
        Страницата не е пронајдена
      </Text>
      <Text selectable style={{ color: theme.colors.textSecondary, marginBottom: theme.spacing.lg, textAlign: "center" }}>
        Страницата што ја барате не постои.
      </Text>
      <Pressable
        accessible
        accessibilityLabel="Назад кон почетна"
        accessibilityRole="button"
        onPress={() => router.replace("/(tabs)/(home)")}
        style={{ backgroundColor: theme.colors.primary, borderRadius: theme.radius.md, paddingVertical: 12, paddingHorizontal: 24 }}
      >
        <Text style={{ color: "#FFFFFF", fontWeight: "600", fontSize: 16 }}>Начална страница</Text>
      </Pressable>
    </View>
  );
}