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

import { images } from "@/constants";
import { useT } from "@/lib/i18n";

const Chat = () => {
  const t = useT();

  return (
    <SafeAreaView className="flex-1 bg-white dark:bg-neutral-950 p-5">
      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
        <Text className="text-2xl font-JakartaBold text-black dark:text-white">
          {t("chat.title")}
        </Text>

        <View className="flex-1 h-fit flex justify-center items-center">
          <Image
            source={images.message}
            alt={t("chat.messageAlt")}
            className="w-full h-40"
            resizeMode="contain"
          />

          <Text className="text-3xl font-JakartaBold mt-3 text-black dark:text-white">
            {t("chat.noMessages")}
          </Text>

          <Text className="text-base mt-2 text-center px-7 text-general-200 dark:text-neutral-400">
            {t("chat.startConversation")}
          </Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default Chat;