import React from "react";
import { View, ViewProps, Platform } from "react-native";
import { cn } from "@/lib/utils";
import { useColorScheme } from "nativewind";

interface ShadowWrapperProps extends ViewProps {
  level?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
  children: React.ReactNode;
  className?: string;
}

export function ShadowWrapper({
  level = "md",
  className,
  children,
  ...props
}: ShadowWrapperProps) {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";

  const shadowClasses = {
    none: "",
    xs: isDark ? "" : "shadow-sm shadow-slate-200/30",
    sm: isDark ? "" : "shadow-sm shadow-slate-200/50",
    md: isDark ? "" : "shadow-md shadow-slate-200/60",
    lg: isDark ? "" : "shadow-xl shadow-slate-200/70",
    xl: isDark ? "" : "shadow-2xl shadow-slate-300/40",
  };

  const elevations = {
    none: 0,
    xs: 1,
    sm: 2,
    md: 4,
    lg: 8,
    xl: 12,
  };

  // Android elevation needs a background color to cast a shadow
  const hasBgClass = className?.includes("bg-");
  const androidBaseStyle =
    Platform.OS === "android"
      ? {
          elevation: isDark ? 0 : elevations[level],
          backgroundColor: hasBgClass || isDark ? undefined : "white",
          shadowColor: "#000",
        }
      : {};

  return (
    <View
      className={cn(shadowClasses[level], className)}
      style={[androidBaseStyle, props.style as any]}
      {...props}
    >
      {children}
    </View>
  );
}