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

type Props = {
   category: 'purple' | 'orange'
   title: string
   user: string
   jamAwal: string
   jamAkhir: string
   onPress?: () => void
}

export default function EventItem({ category, title, user, jamAwal, jamAkhir, onPress }: Props) {
   const { activeTheme, colors } = useTheme();

   const getBackgroundColor = (cat: 'purple' | 'orange') => {
      if (activeTheme === 'dark') {
         return cat === 'purple' ? '#2D2B5E' : '#1C3347';
      }
      return cat === 'purple' ? '#A9B5DF' : '#D6E6F2';
   };

   const getStickColor = (cat: 'purple' | 'orange') => {
      if (activeTheme === 'dark') {
         return cat === 'purple' ? '#7886C7' : '#94B4C1';
      }
      return cat === 'purple' ? '#7886C7' : '#94B4C1';
   };

   return (
      <Pressable style={[Styles.itemEvent, { backgroundColor: getBackgroundColor(category) }]} onPress={onPress}>
         <View style={[Styles.dividerEvent, { backgroundColor: getStickColor(category) }]} />
         <View style={[Styles.w90]}>
            <Text>{jamAwal} - {jamAkhir}</Text>
            <Text numberOfLines={1} ellipsizeMode="tail" style={[Styles.textDefaultSemiBold, Styles.mv05]}>{title}</Text>
            <Text numberOfLines={1} ellipsizeMode="tail">Dibuat oleh : {user}</Text>
         </View>
      </Pressable>
   )
}