import { StyleSheet, View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { colors } from '../theme';

export default function TableBackground({ children, style }) {
  return (
    <View style={[styles.wrapper, style]}>
      <LinearGradient
        colors={[colors.tableEdge, '#3e2a10']}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={styles.edge}
      >
        <LinearGradient
          colors={[colors.tableFelt, colors.tableFeltDark]}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
          style={styles.felt}
        >
          <View style={styles.innerRing} />
          {children}
        </LinearGradient>
      </LinearGradient>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    width: '100%',
    padding: 12
  },
  edge: {
    flex: 1,
    borderTopLeftRadius: 60,
    borderTopRightRadius: 60,
    borderBottomLeftRadius: 280,
    borderBottomRightRadius: 280,
    padding: 10
  },
  felt: {
    flex: 1,
    borderTopLeftRadius: 48,
    borderTopRightRadius: 48,
    borderBottomLeftRadius: 260,
    borderBottomRightRadius: 260,
    padding: 20,
    overflow: 'hidden'
  },
  innerRing: {
    position: 'absolute',
    top: 16,
    bottom: 16,
    left: 16,
    right: 16,
    borderWidth: 2,
    borderColor: 'rgba(255,255,255,0.15)',
    borderTopLeftRadius: 40,
    borderTopRightRadius: 40,
    borderBottomLeftRadius: 240,
    borderBottomRightRadius: 240
  }
});