import React from "react";
import { StyleSheet, View } from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import { useColorScheme } from "@/hooks/useColorScheme";

export default function TabBarBackground() {
  const colorScheme = useColorScheme();
  const isDark = colorScheme === "dark";

  return (
    <View style={StyleSheet.absoluteFill}>
      <LinearGradient
        colors={isDark ? ["#1F2937", "#111827", "#0F172A"] : ["#FFFFFF", "#F8FAFC", "#F1F5F9"]}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={StyleSheet.absoluteFill}
      />

      {/* Subtle top border gradient */}
      <LinearGradient
        colors={
          isDark
            ? ["rgba(59, 130, 246, 0.3)", "transparent"]
            : ["rgba(59, 130, 246, 0.1)", "transparent"]
        }
        start={{ x: 0, y: 0 }}
        end={{ x: 0, y: 1 }}
        style={styles.topBorder}
      />

      {/* Optional: Add some decorative elements */}
      <View
        style={[
          styles.decorativeCircle,
          {
            backgroundColor: isDark ? "rgba(59, 130, 246, 0.05)" : "rgba(59, 130, 246, 0.03)",
          },
        ]}
      />
    </View>
  );
}

export function useBottomTabOverflow() {
  return 24; // Account for the rounded corners
}

const styles = StyleSheet.create({
  topBorder: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    height: 2,
  },
  decorativeCircle: {
    position: "absolute",
    top: -20,
    right: 20,
    width: 80,
    height: 80,
    borderRadius: 40,
  },
});
