/**
 * Gradient Background Component
 * Reusable gradient background with multiple presets
 */

import React from 'react';
import { StyleSheet, ViewStyle } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { theme } from '../styles/theme';

interface GradientBackgroundProps {
    variant?: 'primary' | 'success' | 'warning' | 'danger' | 'purple' | 'ocean' | 'sunset' | 'dark';
    colors?: string[];
    style?: ViewStyle;
    children?: React.ReactNode;
    start?: { x: number; y: number };
    end?: { x: number; y: number };
}

export function GradientBackground({
    variant = 'primary',
    colors,
    style,
    children,
    start = { x: 0, y: 0 },
    end = { x: 1, y: 1 },
}: GradientBackgroundProps) {
    const gradientColors = (colors || theme.gradients[variant]) as readonly [string, string, ...string[]];

    return (
        <LinearGradient
            colors={gradientColors}
            start={start}
            end={end}
            style={[styles.gradient, style]}
        >
            {children}
        </LinearGradient>
    );
}

const styles = StyleSheet.create({
    gradient: {
        flex: 1,
    },
});