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 { theme, colors } = useTheme();

   const getBackgroundColor = (cat: 'purple' | 'orange') => {
      if (theme === 'dark') {
         return cat === 'orange' ? '#547792' : '#1D546D';
      }
      return cat === 'orange' ? '#D6E6F2' : '#A9B5DF';
   };

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

   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>
   )
}