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

import bgDark from '@/assets/images/bgproject-dark.png';
import bgLight from '@/assets/images/bgproject-light.png';

type Props = {
   content: 'carousel' | 'page';
   children: React.ReactNode;
   title: string
   headerColor: 'primary' | 'warning'
   onPress?: () => void
   contentPosition?: 'top' | 'center'
   titleTail?: number
   height?: number
};
export default function PaperGridContent({ content, children, title, headerColor, onPress, contentPosition, titleTail, height }: Props) {
   const { colors, activeTheme } = useTheme();
   const bgSource = activeTheme === 'light' ? bgLight : bgDark;
   return (
      <Pressable onPress={onPress}>
         <View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent, { backgroundColor: colors.card }]}>
            {
               headerColor == 'warning' ? (
                  <View style={[Styles.headerPaperGrid, ColorsStatus.warning]}>
                     <Text numberOfLines={titleTail ? titleTail : undefined} style={[Styles.textSubtitle, Styles.cDefault, { textAlign: 'center' }]}>{title}</Text>
                  </View>
               ) : (
                  <ImageBackground
                     source={bgSource}
                     resizeMode="cover"
                     imageStyle={{ borderTopLeftRadius: 5, borderTopRightRadius: 5 }}
                     style={[Styles.headerPaperGrid, { backgroundColor: colors.primary }]}
                  >
                     <Text numberOfLines={titleTail ? titleTail : undefined} style={[Styles.textSubtitle, Styles.cWhite, { textAlign: 'center' }]}>{title.charAt(0).toUpperCase() + title.slice(1)}</Text>
                  </ImageBackground>
               )
            }
            <View style={[
               contentPosition && contentPosition == 'top' ? Styles.contentPaperGrid2 : Styles.contentPaperGrid,
               height ? { height: height } : {}
            ]}>
               {children}
            </View>
         </View>
      </Pressable>

   )
}