import React from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { NativeStackScreenProps } from "@react-navigation/native-stack";
import type { RootStackParamList } from "../navigation/types";
import { useTheme } from "../context/ThemeContext";

type Props = NativeStackScreenProps<RootStackParamList, "home">;

export default function HomeScreen({ navigation }: Props) {
    const { colors } = useTheme();

    return (
        <View
            style={[styles.container, { backgroundColor: colors.bgSecondary }]}
        >
            <View style={[styles.card, { backgroundColor: colors.bgPrimary }]}>
                <Text style={[styles.title, { color: colors.textWhite }]}>
                    Bienvenue sur l'app !
                </Text>
                <Text style={[styles.subtitle, { color: colors.textMuted }]}>
                    Connectez-vous ou créez un compte pour continuer
                </Text>

                <TouchableOpacity
                    style={styles.button}
                    onPress={() => navigation.navigate("login")}
                >
                    <Text style={styles.buttonText}>Se connecter</Text>
                </TouchableOpacity>

                <TouchableOpacity
                    style={[styles.button, styles.registerButton]}
                    onPress={() => navigation.navigate("register")}
                >
                    <Text
                        style={[styles.buttonText, styles.registerButtonText]}
                    >
                        Créer un compte
                    </Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        padding: 16,
    },
    card: {
        width: "100%",
        maxWidth: 400,
        borderRadius: 16,
        padding: 24,
        alignItems: "center",
    },
    title: {
        fontSize: 28,
        fontWeight: "bold",
        marginBottom: 8,
        textAlign: "center",
    },
    subtitle: {
        fontSize: 14,
        marginBottom: 24,
        textAlign: "center",
    },
    button: {
        backgroundColor: "#7c3aed",
        borderRadius: 8,
        paddingVertical: 12,
        paddingHorizontal: 24,
        alignItems: "center",
        width: "100%",
        marginBottom: 12,
    },
    registerButton: {
        backgroundColor: "transparent",
        borderWidth: 1,
        borderColor: "#7c3aed",
    },
    buttonText: {
        color: "white",
        fontWeight: "600",
        fontSize: 16,
    },
    registerButtonText: {
        color: "#7c3aed",
    },
});