import AlarmList from "@/components/AlarmList";
import { Link } from "expo-router";
import {
  Platform,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

const alarmExample = {
  alarms: [
    {
      name: "Ngập nước có cảnh báo",
      t: 1762226488,
      level: 1,
      id: "0:8:1",
    },
    {
      name: "Tầu cảnh báo sos",
      t: 1762226596,
      level: 3,
      id: "50:15",
    },
    {
      name: "Khói có cảnh báo",
      t: 1762226589,
      level: 1,
      id: "0:1:1",
    },
    {
      name: "Cửa có cảnh báo",
      t: 1762226547,
      level: 1,
      id: "0:7:1",
    },
  ],
  level: 3,
};

export default function Warning() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <Text style={styles.titleText}>Nhật Ký Chuyến Đi</Text>

        <Link href="/modal" asChild>
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonText}>Mở Modal</Text>
          </TouchableOpacity>
        </Link>
        <AlarmList alarmsData={alarmExample.alarms} />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  scrollContent: {
    flexGrow: 1,
  },
  container: {
    alignItems: "center",
    padding: 15,
  },
  titleText: {
    fontSize: 32,
    fontWeight: "700",
    lineHeight: 40,
    marginBottom: 10,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  button: {
    backgroundColor: "#007AFF",
    paddingVertical: 14,
    paddingHorizontal: 24,
    borderRadius: 8,
    marginTop: 20,
  },
  buttonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "600",
  },
});