import { useClerk, useUser } from "@clerk/clerk-expo";
import { Image, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

import { CustomButton } from "@/components/custom-button";
import { images } from "@/constants";

// Placeholder driver home. The driver experience (going online, accepting
// rides) is not built yet — drivers are registered here and managed in the
// database for now.
const DriverHome = () => {
  const { user } = useUser();
  const { signOut } = useClerk();

  return (
    <SafeAreaView className="flex-1 bg-white justify-center items-center px-7">
      <Image
        source={images.check}
        alt="Registered"
        className="w-[110px] h-[110px] mb-5"
      />

      <Text className="text-2xl font-JakartaBold text-center">
        You&apos;re registered as a driver, {user?.firstName || "there"}!
      </Text>

      <Text className="text-base text-general-200 font-Jakarta text-center mt-3">
        Driver mode is coming soon. We&apos;ll contact you at{" "}
        {user?.emailAddresses[0]?.emailAddress} once your account is activated.
      </Text>

      <CustomButton
        title="Sign Out"
        onPress={() => signOut()}
        className="mt-10"
      />
    </SafeAreaView>
  );
};

export default DriverHome;