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

import { Colors, Spacing, BorderRadius, Shadows } from '@/constants/theme';
import { useThemeColor } from '@/hooks/use-theme-color';
import { Text } from '@/components/ui/Text'
import { Ionicons } from '@expo/vector-icons';

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

export const Card: React.FC<CardProps> = ({
  children,
  onPress,
  variant = 'default',
  style,
  testID,
}) => {
  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.containerPadding,
      marginBottom: Spacing.cardGap,
      ...(isHighlighted && {
        backgroundColor: accentBlueColor,
        borderColor: 'transparent',
      }),
      ...Shadows.sm,
    },
  });

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

interface SubtleInfoCardProps {
  text: string;
  style?: StyleProp<ViewStyle>;
};

export const SubtleInfoCard: React.FC<SubtleInfoCardProps> = ({
  text,
  style
}) => {
  const accentBlueColor = useThemeColor({}, 'accentBlue');

  const styles = StyleSheet.create({
    card: {
      backgroundColor: accentBlueColor,
      borderRadius: BorderRadius.lg,
      padding: Spacing.cardGap,
      marginBottom: Spacing.cardGap,
      flex: 1,
      flexDirection: 'row',
      alignItems: 'flex-start'
    },
    text: {
      fontSize: 12,
      lineHeight: 18,
      color: Colors.light.textSecondary,
      marginLeft: 10
    },
  });

  return (
    <View style={[styles.card, style]}>
      <Ionicons name="information-circle-outline" size={20} color="gray" />

      <Text style={styles.text}>
        {text.replace(/\s+/g, ' ').trim()}
      </Text>
    </View>
  )
}