import { Pressable, StyleSheet, Text, View } from "react-native";
import { colors } from "../theme/colors";
import { radius, spacing } from "../theme/spacing";
import type { IconComponent } from "../types/domain";

interface InfoRowProps {
  icon: IconComponent;
  label: string;
  value: string;
  onPress?: () => void;
}

export function InfoRow({ icon: Icon, label, value, onPress }: InfoRowProps) {
  const Wrapper = onPress ? Pressable : View;

  return (
    <Wrapper
      accessibilityRole={onPress ? "button" : undefined}
      onPress={onPress}
      style={styles.row}
    >
      <View style={styles.iconWrap}>
        <Icon color={colors.primary} size={18} strokeWidth={2.4} />
      </View>
      <View style={styles.text}>
        <Text style={styles.label}>{label}</Text>
        <Text style={styles.value}>{value}</Text>
      </View>
    </Wrapper>
  );
}

const styles = StyleSheet.create({
  row: {
    minHeight: 62,
    borderRadius: radius.md,
    backgroundColor: colors.surface,
    borderWidth: 1,
    borderColor: colors.line,
    flexDirection: "row",
    alignItems: "center",
    gap: spacing.md,
    padding: spacing.md
  },
  iconWrap: {
    width: 38,
    height: 38,
    borderRadius: radius.sm,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: colors.primarySoft
  },
  text: {
    flex: 1,
    gap: 2
  },
  label: {
    color: colors.muted,
    fontSize: 11,
    fontWeight: "800"
  },
  value: {
    color: colors.ink,
    fontSize: 14,
    lineHeight: 18,
    fontWeight: "800"
  }
});