import type { ReactNode } from "react";
import { View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { colors, gutter, radii, shadows } from "@/lib/theme";

/**
 * Bottom action bar. `floating` renders the dark pill used on product detail;
 * the default renders a flush surface bar used in cart and checkout.
 */
export function StickyBar({
  children,
  floating,
}: {
  children: ReactNode;
  floating?: boolean;
}) {
  const insets = useSafeAreaInsets();

  if (floating) {
    return (
      <View
        style={[
          {
            position: "absolute",
            left: gutter,
            right: gutter,
            bottom: Math.max(insets.bottom, 14),
            backgroundColor: colors.ink,
            borderRadius: radii.pill,
            paddingVertical: 12,
            paddingHorizontal: 16,
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between",
            gap: 12,
          },
          shadows.md,
        ]}
      >
        {children}
      </View>
    );
  }

  return (
    <View
      style={[
        {
          backgroundColor: colors.surface,
          borderTopWidth: 1,
          borderTopColor: colors.line,
          paddingHorizontal: gutter,
          paddingTop: 14,
          paddingBottom: Math.max(insets.bottom, 14),
        },
        shadows.md,
      ]}
    >
      {children}
    </View>
  );
}