import React from 'react';
import { ViewStyle, StyleProp, StatusBar } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

type GradientPreset = 'warm' | 'cool';

interface GradientBackgroundProps {
  children?: React.ReactNode;
  style?: StyleProp<ViewStyle>;
  colors?: string[];
  start?: { x: number; y: number };
  end?: { x: number; y: number };
  locations?: number[];
  preset?: GradientPreset;
}

const PRESET_COLORS: Record<GradientPreset, string[]> = {
  // Warm preset similar to the provided login mock
  warm: ['#FFE9CC', '#F6E6FF'],
  // Cool preset for headers/hero based on guidelines
  cool: ['#3AA0FF', '#2D6BFF'],
};

const GradientBackground: React.FC<GradientBackgroundProps> = ({
  children,
  style,
  colors,
  start,
  end,
  locations,
  preset = 'warm',
}) => {
  const gradientColors = colors ?? PRESET_COLORS[preset];
  const gradientStart = start ?? { x: 0, y: 0 };
  const gradientEnd = end ?? { x: 1, y: 1 };

  return (
    <LinearGradient colors={gradientColors} start={gradientStart} end={gradientEnd} locations={locations} style={style}>
      <StatusBar backgroundColor={'#FFE9CC'} barStyle={'dark-content'} />
      {children}
    </LinearGradient>
  );
};

export default GradientBackground;