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

import { useTheme } from '../theme/context';

interface GradientCardProps {
  children: ReactNode;
  style?: StyleProp<ViewStyle>;
}

export function GradientCard({ children, style }: GradientCardProps) {
  const theme = useTheme();
  const isGradientAvailable =
    LinearGradient !== undefined &&
    LinearGradient !== null &&
    (typeof LinearGradient === 'function' || typeof LinearGradient === 'object');

  const containerStyle = [
    styles.container,
    {
      borderRadius: theme.borderRadius.l,
      borderColor: theme.colors.surface,
    },
    style,
  ];

  if (!isGradientAvailable) {
    return <View style={containerStyle}>{children}</View>;
  }

  return (
    <LinearGradient
      colors={['rgba(255, 255, 255, 0.12)', 'rgba(255, 255, 255, 0.04)']}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
      style={containerStyle}
    >
      {children}
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    borderWidth: 1,
    overflow: 'hidden',
  },
});