import React from 'react';
import { View, TouchableOpacity, Text, StyleSheet, ViewStyle } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { COLORS, SPACING, RADIUS, FONT_SIZES, FONT_WEIGHTS, LAYOUT } from '../theme/colors';

interface GlassCardProps {
  title: string;
  subtitle: string;
  iconLabel?: string;
  iconColors?: readonly [string, string];
  onPress?: () => void;
  style?: ViewStyle;
  borderColor?: string;
}

export default function GlassCard({
  title,
  subtitle,
  iconLabel,
  iconColors,
  onPress,
  style,
  borderColor,
}: GlassCardProps) {
  const Wrapper = onPress ? TouchableOpacity : View;

  return (
    <Wrapper
      activeOpacity={0.7}
      onPress={onPress}
      accessibilityRole={onPress ? 'button' : undefined}
      accessibilityLabel={onPress ? `${title}. ${subtitle}` : undefined}
      style={[
        styles.card,
        borderColor ? { borderColor } : undefined,
        style,
      ]}
    >
      <View style={styles.content}>
        {iconLabel && (
          <LinearGradient
            colors={iconColors ? [...iconColors] as [string, string] : [COLORS.brand.primary, COLORS.brand.accentMagenta]}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 1 }}
            style={styles.iconCircle}
          >
            <Text style={styles.iconText}>{iconLabel}</Text>
          </LinearGradient>
        )}
        <View style={styles.textContainer}>
          <Text style={styles.title}>{title}</Text>
          <Text style={styles.subtitle}>{subtitle}</Text>
        </View>
        {onPress && <Text style={styles.arrow}>›</Text>}
      </View>
    </Wrapper>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: COLORS.bg.card,
    borderWidth: 1,
    borderColor: COLORS.border.accent,
    borderRadius: RADIUS.xxl,
    padding: SPACING.lg,
    marginBottom: SPACING.sm + 4,
  },
  content: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  iconCircle: {
    width: LAYOUT.ICON_CIRCLE_SIZE,
    height: LAYOUT.ICON_CIRCLE_SIZE,
    borderRadius: RADIUS.full,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: SPACING.md,
  },
  iconText: {
    color: COLORS.text.primary,
    fontSize: FONT_SIZES.lg,
    fontWeight: FONT_WEIGHTS.bold,
  },
  textContainer: {
    flex: 1,
  },
  title: {
    color: COLORS.text.primary,
    fontSize: FONT_SIZES.base,
    fontWeight: FONT_WEIGHTS.bold,
  },
  subtitle: {
    color: COLORS.text.secondary,
    fontSize: FONT_SIZES.sm,
    marginTop: 2,
  },
  arrow: {
    color: COLORS.text.hint,
    fontSize: FONT_SIZES.xxl,
    fontWeight: FONT_WEIGHTS.bold,
  },
});