import React from 'react';
import { StyleSheet, ViewProps, Platform, DimensionValue } from 'react-native';
import { ThemedView } from '@/components/theme';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

type ThemedCardProps = ViewProps & {
  width?: DimensionValue;
  height?: DimensionValue;
  padding?: number;
  elevation?: number;
  borderRadius?: number;
};

const ThemedCard: React.FC<ThemedCardProps> = ({
  width = '100%',
  height,
  padding = 16,
  elevation = 3,
  borderRadius = 12,
  style,
  children,
  ...restProps
}) => {
  const scheme = useColorScheme() ?? 'dark';
  
  return (
    <ThemedView
      style={[
        styles.card,
        {
          width,
          height,
          padding,
          borderRadius,
          backgroundColor: Colors[scheme].card,
          ...Platform.select({
            ios: {
              shadowColor: Colors[scheme].text,
              shadowOffset: { width: 0, height: elevation/2 },
              shadowOpacity: 0.1,
              shadowRadius: elevation,
            },
            android: {
              elevation,
            },
          }),
        },
        style,
      ]}
      {...restProps}
    >
      {children}
    </ThemedView>
  );
};

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

export default ThemedCard;