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>;
}

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

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

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


export default Panel;