import { useThemeColor } from "@/hooks/use-theme-color";
import { ReactNode } from "react";
import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";

interface PanelProps {
  children?: ReactNode;
  className?: string;
  style?: StyleProp<ViewStyle>;
  withPadding?: boolean;
}

const Panel = ({children, className, style, withPadding = true}: PanelProps) => {
  const backgroundColor = useThemeColor({ }, 'background');

  return (
    <View style={[styles.panel, withPadding ? styles.panelPadding : null, { backgroundColor }, style]} className={className}>
      {children}
    </View>
  )
}

const styles = StyleSheet.create({
  panel: {
    borderRadius: 5,
    boxShadow: '0px 4px 5px 0px rgba(0,0,0,0.18)'
  },
  panelPadding: {
    padding: 15,
  }
});


export default Panel;