import React from "react";
import { StyleSheet, Text, View } from "react-native";
import type { Product } from "../types/Product";

export function BottleOverlay({ product }: { product: Product }) {
  return (
    <View style={styles.card}>
      <Text style={styles.brand}>{product.brand}</Text>
      <Text style={styles.name}>{product.name}</Text>
      <Text style={styles.desc}>{product.description}</Text>
      <Text style={styles.qr}>QR · {product.qr_code}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: "rgba(20,16,12,0.88)",
    padding: 20,
    borderRadius: 16,
    gap: 6,
  },
  brand: { color: "#C4A35A", fontSize: 13, letterSpacing: 1, textTransform: "uppercase" },
  name: { color: "#FFF8EC", fontSize: 26, fontWeight: "700" },
  desc: { color: "#D4CBB8", fontSize: 15, lineHeight: 22 },
  qr: { marginTop: 8, color: "#8E8574", fontSize: 12 },
});