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

type Props = {
   title: string;
   subtitle: string;
   icon: React.ReactNode;
   onPress: () => void;
};

export default function FiturGridItem({ title, subtitle, icon, onPress }: Props) {
   const { colors } = useTheme();

   return (
      <Pressable
         onPress={onPress}
         style={({ pressed }) => [
            Styles.wrapGridItem,
            {
               backgroundColor: colors.card,
               borderColor: colors.icon + '20',
            },
            pressed && { opacity: 0.7 }
         ]}
      >
         <View style={[Styles.p05, { marginRight: 10 }]}>
            {icon}
         </View>
         <View style={{ flex: 1 }}>
            <Text style={[Styles.textDefaultSemiBold, { color: colors.text, lineHeight: 20 }]} numberOfLines={1}>{title}</Text>
            <Text style={[Styles.textMediumNormal, { color: colors.dimmed, lineHeight: 15 }]} numberOfLines={1}>{subtitle}</Text>
         </View>
      </Pressable>
   );
}