Refactor: Create reusable DepthIconButton component

app/src/main/java/org/greenstand/android/TreeTracker/view/TextButton.kt

@@ -67,6 +67,7 @@ import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import org.greenstand.android.TreeTracker.R
@@ -84,21 +85,16 @@ fun BoxScope.ArrowButton(
     isLeft: Boolean,
     onClick: () -> Unit,
 ) {
-    TreeTrackerButton(
-        isEnabled = isEnabled,
-        colors = colors,
-        modifier = Modifier
-            .align(Alignment.Center)
-            .size(height = 62.dp, width = 62.dp),
+    DepthIconButton(
+        icon = getPainter(colors = colors, isLeft = isLeft),
         onClick = onClick,
-    ) {
-        Image(
-            modifier = Modifier
-                .size(height = 45.dp, width = 45.dp),
-            painter = getPainter(colors = colors, isLeft = isLeft),
-            contentDescription = null,
-        )
-    }
+        modifier = Modifier.align(Alignment.Center),
+        colors = colors,
+        buttonSize = 62.dp,
+        iconSize = 45.dp,
+        isEnabled = isEnabled,
+        contentDescription = if (isLeft) "Previous" else "Next"
+    )
 }
 
 @Composable
@@ -149,29 +145,65 @@ fun ApprovalButton(
     }
 }
 
+/**
+ * A reusable depth button with an icon. Use this for consistent icon buttons
+ * throughout the app (info buttons, arrow buttons, etc.)
+ *
+ * @param icon The painter resource for the icon to display
+ * @param onClick The callback function for click event
+ * @param modifier The modifier to be applied to the button
+ * @param colors The button colors (defaults to WhiteLight)
+ * @param buttonSize The size of the button (defaults to 60.dp)
+ * @param iconSize The size of the icon inside the button (defaults to 45.dp)
+ * @param depth The depth of the 3D effect (defaults to 6f)
+ * @param isEnabled Whether the button is enabled (defaults to true)
+ * @param contentDescription Accessibility description for the icon
+ */
 @Composable
-fun InfoButton(
-    modifier: Modifier = Modifier,
+fun DepthIconButton(
+    icon: Painter,
     onClick: () -> Unit,
-    shape: TreeTrackerButtonShape = TreeTrackerButtonShape.Circle
-
+    modifier: Modifier = Modifier,
+    colors: ButtonColors = AppButtonColors.WhiteLight,
+    buttonSize: Dp = 60.dp,
+    iconSize: Dp = 45.dp,
+    depth: Float = 6f,
+    isEnabled: Boolean = true,
+    contentDescription: String? = null
 ) {
     TreeTrackerButton(
-        modifier = modifier.size(60.dp),
-        colors = AppButtonColors.WhiteLight,
+        modifier = modifier.size(buttonSize),
+        colors = colors,
         onClick = onClick,
         shape = TreeTrackerButtonShape.Circle,
-        depth = 6f
+        depth = depth,
+        isEnabled = isEnabled
     ) {
         Image(
-            painter = painterResource(id = R.drawable.info_icon),
-            modifier = Modifier
-                .size(80.dp),
-            contentDescription = null
+            painter = icon,
+            modifier = Modifier.size(iconSize),
+            contentDescription = contentDescription
         )
     }
 }
 
+@Composable
+fun InfoButton(
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit,
+) {
+    DepthIconButton(
+        icon = painterResource(id = R.drawable.info_icon),
+        onClick = onClick,
+        modifier = modifier,
+        colors = AppButtonColors.WhiteLight,
+        buttonSize = 60.dp,
+        iconSize = 80.dp,
+        depth = 6f,
+        contentDescription = "Info"
+    )
+}
+
 @Composable
 fun BoxScope.LanguageButton() {
     val navController = LocalNavHostController.current