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

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 } = useTheme();
   return (
      <Pressable onPress={onPress}>
         <View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent]}>
            <View style={[Styles.headerPaperGrid, headerColor == 'warning' ? ColorsStatus.warning : { backgroundColor: colors.primary }]}>
               <Text numberOfLines={titleTail ? titleTail : undefined} style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite, { textAlign: 'center' }]}>{title}</Text>
            </View>
            <View style={[
               contentPosition && contentPosition == 'top' ? Styles.contentPaperGrid2 : Styles.contentPaperGrid,
               { backgroundColor: colors.card },
               height ? { height: height } : {}
            ]}>
               {children}
            </View>
         </View>
      </Pressable>

   )
}