import AppButton from "./src/components/ui/AppButton";
import AppScreen from "./src/components/ui/AppScreen";
import AppText from "./src/components/ui/AppText";

import { useRouter } from "expo-router";
import { Pressable, StyleSheet } from "react-native";
import { typography } from "./src/theme/typography";

export default function Orders() {
  const router = useRouter();

  return (
    <AppScreen>
      {/* Back button */}
      <Pressable style={styles.backButton} onPress={() => router.back()}>
        <AppText style={styles.backText}>← Back</AppText>
      </Pressable>

      {/* Title */}
      <AppText style={typography.title}>Orders</AppText>
      <AppText style={typography.subtitle}>
        View and manage customer orders
      </AppText>

      {/* Buttons */}
      <AppButton title="Take Order" onPress={() => router.push("/orders/tableSelect")} />
      <AppButton title="Orders to Prepare" onPress={() => router.push("/orders/prepare")} />
      <AppButton title="Orders to Serve" onPress={() => router.push("/orders/serve")} />
      <AppButton title="Orders served" onPress={() => router.push("/orders/served")} />

    </AppScreen>
  );
}

const styles = StyleSheet.create({
  backButton: {
    alignSelf: "flex-start",
  },
  backText: {
    color: "#000000",
    fontSize: 16,
  },
});
