import { ScrollView, Text } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

import { COLORS } from "../constants/colors";

import SectionTitle from "../components/SectionTitle";
import AlertItem from "@/components/Alertltem";

export default function AlertsScreen() {
    return (
        <SafeAreaView
            style={{
                flex: 1,
                backgroundColor: COLORS.background,
            }}
        >
            <ScrollView
                showsVerticalScrollIndicator={false}
                contentContainerStyle={{
                    padding: 20,
                    paddingBottom: 120,
                }}
            >
                <SectionTitle title="Alertas" />

                <Text
                    style={{
                        color: "#6B7280",
                        fontSize: 14,
                        marginBottom: 24,
                        marginLeft: 12,
                    }}
                >   
                    Estado actual de recolección
                </Text>

                <AlertItem
                    title="Ruta iniciada"
                    description="El vehículo de recolección ha comenzado la ruta matutina en tu distrito."
                    time="Justo ahora"
                    type="started"
                />

                <AlertItem
                    title="Camión cerca"
                    description="El camión está a 2 cuadras. Asegúrate de sacar tus contenedores."
                    time="Hace 15m"
                    type="near"
                />

                <AlertItem
                    title="Retraso detectado"
                    description="Congestión de tráfico en la zona principal puede causar retraso."
                    time="Hace 1h"
                    type="danger"
                />

                <AlertItem
                    title="Ruta completada"
                    description="¡Buen trabajo! Tu vecindario logró desviar residuos reciclables."
                    time="Ayer"
                    type="completed"
                />
            </ScrollView>
        </SafeAreaView>
    );
}   