import React from 'react';
import {
  View,
  StyleSheet,
  Pressable,
  ViewStyle,
} from 'react-native';

import { Colors, Typography, Spacing, BorderRadius, Shadows } from '@/constants/theme';
import { useThemeColor } from '@/hooks/use-theme-color';
import { ThemedText } from '@/components/misc/themed-text'

interface CardProps {
  children: React.ReactNode;
  onPress?: () => void;
  variant?: 'default' | 'highlighted';
  style?: ViewStyle;
}

export const Card: React.FC<CardProps> = ({
  children,
  onPress,
  variant = 'default',
  style,
}) => {
  const isHighlighted = variant === 'highlighted';

  const surfaceColor = useThemeColor({}, 'surface');
  const cardBorderColor = useThemeColor({}, 'cardBorder');
  const accentBlueColor = useThemeColor({}, 'accentBlue');

  const styles = StyleSheet.create({
    card: {
      backgroundColor: surfaceColor,
      borderRadius: BorderRadius.lg,
      borderWidth: 1,
      borderColor: cardBorderColor,
      padding: Spacing.internalPadding,
      marginBottom: Spacing.cardGap,
      ...(isHighlighted && {
        backgroundColor: accentBlueColor,
        borderColor: 'transparent',
      }),
      ...Shadows.sm,
    },
  });

  return (
    <Pressable
      onPress={onPress}
      disabled={!onPress}
      style={({ pressed }) => [
        styles.card,
        pressed && onPress && {
          opacity: 0.8,
        },
        style,
      ]}
    >
      {children}
    </Pressable>
  );
};