import React from "react";
import { StyleSheet, View, ViewProps, ViewStyle } from "react-native";

import { useColors } from "@/hooks/useColors";

interface CardProps extends ViewProps {
  padded?: boolean;
  elevated?: boolean;
  bordered?: boolean;
  style?: ViewStyle | ViewStyle[];
}

export function Card({
  padded = true,
  elevated = false,
  bordered = true,
  style,
  children,
  ...rest
}: CardProps) {
  const colors = useColors();
  return (
    <View
      {...rest}
      style={[
        styles.base,
        {
          backgroundColor: elevated ? colors.elevated : colors.card,
          borderColor: colors.border,
          borderWidth: bordered ? 1 : 0,
          padding: padded ? 16 : 0,
        },
        style,
      ]}
    >
      {children}
    </View>
  );
}

const styles = StyleSheet.create({
  base: {
    borderRadius: 18,
  },
});