import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { Feather, Ionicons } from "@expo/vector-icons";
import { Pressable, View } from "react-native";
import Text from "./Text";

type Props = {
   title: string
   user: string
   date: string
   onPress: () => void
}

export default function DiscussionItem({ title, user, date, onPress }: Props) {
   const { colors } = useTheme();
   return (
      <Pressable style={[Styles.wrapItemDiscussion, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]} onPress={onPress}>
         <View style={[Styles.rowItemsCenter, Styles.mb10]}>
            <Ionicons name="chatbox-ellipses-outline" size={22} color={colors.text} style={Styles.mr10} />
            <View style={[{ flex: 1 }]}>
               <Text style={{ fontWeight: 'bold' }} numberOfLines={1} ellipsizeMode="tail">{title}</Text>
            </View>
         </View>
         <View style={[Styles.rowSpaceBetween]}>
            <View style={[Styles.rowItemsCenter, { flex: 1 }]}>
               <Feather name="user" size={18} color={colors.dimmed} style={Styles.mr05} />
               <Text style={[Styles.textInformation, { color: colors.dimmed }]} numberOfLines={1} ellipsizeMode="tail">{user}</Text>
            </View>
            <View style={[Styles.rowItemsCenter, { flex: 1, justifyContent: 'flex-end' }]}>
               <Feather name="clock" size={18} color={colors.dimmed} style={Styles.mr05} />
               <Text style={[Styles.textInformation, { color: colors.dimmed }]}>{date}</Text>
            </View>
         </View>
      </Pressable>
   )
}