import React from "react";
import { View } from "react-native";
import Animated from "react-native-reanimated";
import { Label } from "../components/text";
import { type useShakeAnimation } from "../hooks/useShakeAnimation";

type ShakeControl = ReturnType<typeof useShakeAnimation>;

interface ShakeFieldProps {
  shake: ShakeControl;
  label?: string;
  children: React.ReactNode;
  flashRadius?: number;
  /** When `false`, only the red flash runs — no rotation. Defaults to `true`. */
  rotate?: boolean;
}

/**
 * Wraps a form field so it can shake + flash red when validation fails.
 * The label renders outside the shake wrapper so only the input rocks.
 */
export default function ShakeField({
  shake,
  label,
  children,
  flashRadius = 8,
  rotate = true,
}: ShakeFieldProps) {
  return (
    <View>
      {label ? <Label className="mb-2">{label}</Label> : null}
      <Animated.View style={[rotate ? shake.animatedStyle : undefined, { position: "relative" }]}>
        {children}
        <Animated.View
          style={[
            shake.flashStyle,
            {
              pointerEvents: "none",
              position: "absolute",
              left: 0,
              right: 0,
              top: 0,
              bottom: 0,
              borderRadius: flashRadius,
              backgroundColor: "#EF4444",
            },
          ]}
        />
      </Animated.View>
    </View>
  );
}