import { QrCode } from "lucide-react-native";
import { StyleSheet, Text, View } from "react-native";
import QRCode from "react-native-qrcode-svg";
import { colors } from "../theme/colors";
import { radius, spacing } from "../theme/spacing";

interface QrCodeCardProps {
  title: string;
  value: string;
  caption: string;
}

export function QrCodeCard({ title, value, caption }: QrCodeCardProps) {
  return (
    <View style={styles.card}>
      <View style={styles.header}>
        <View style={styles.iconWrap}>
          <QrCode color={colors.primary} size={20} strokeWidth={2.5} />
        </View>
        <View style={styles.headerText}>
          <Text style={styles.title}>{title}</Text>
          <Text style={styles.caption}>{caption}</Text>
        </View>
      </View>
      <View style={styles.qrWrap}>
        <QRCode value={value} size={154} color={colors.ink} backgroundColor="transparent" />
      </View>
      <Text style={styles.value} numberOfLines={1}>
        {value}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    borderRadius: radius.lg,
    backgroundColor: colors.surface,
    borderWidth: 1,
    borderColor: colors.line,
    padding: spacing.lg,
    gap: spacing.lg,
    alignItems: "center"
  },
  header: {
    alignSelf: "stretch",
    flexDirection: "row",
    gap: spacing.md,
    alignItems: "center"
  },
  iconWrap: {
    width: 42,
    height: 42,
    borderRadius: radius.md,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: colors.primarySoft
  },
  headerText: {
    flex: 1
  },
  title: {
    color: colors.ink,
    fontSize: 17,
    fontWeight: "900"
  },
  caption: {
    color: colors.muted,
    fontSize: 12,
    lineHeight: 17,
    fontWeight: "600",
    marginTop: 2
  },
  qrWrap: {
    width: 190,
    height: 190,
    borderRadius: radius.lg,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: colors.background,
    borderWidth: 1,
    borderColor: colors.line
  },
  value: {
    color: colors.muted,
    fontSize: 12,
    fontWeight: "800"
  }
});