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

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

import SectionTitle from "../components/SectionTitle";
import EtaCard from "../components/EtaCard";
import QuickAction from "../components/QuickAction";

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

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

        <EtaCard />

        <SectionTitle title="Acciones rápidas" />

        <View
          style={{
            flexDirection: "row",
            justifyContent: "space-between",
            marginTop: 10,
          }}
        >
          <QuickAction title="Alertas" icon="notifications-outline" />

          <QuickAction title="Reportar" icon="warning-outline" />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}
