related-ui-components 2.0.5 → 2.0.7

package/lib/module/components/Card/templates/SelaDealCard.js

@@ -1,44 +1,79 @@
 "use strict";
 
 // src/components/SelaDealCard/SelaDealCard.tsx
-import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import Card from "../Card.js"; // Adjust path to your Card component
-import { useTheme } from "../../../theme/ThemeContext.js"; // Adjust path
-
+import React, { useState, useEffect } from "react"; // Import useState and useEffect
+import { View, Text, StyleSheet, Image // Import Image
+// Import LayoutChangeEvent
+} from "react-native";
+import Card from "../Card.js";
+import { useTheme } from "../../../theme/ThemeContext.js";
 import { LockOverlay } from "../../LockOverlay/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SelaDealCard = ({
-  variant,
-  backgroundImage,
-  label,
-  labelStyle,
-  labelContainerStyle,
-  providerName,
-  providerNameStyle,
-  description,
-  descriptionStyle,
-  price,
-  priceStyle,
-  priceContainerStyle,
-  onPress,
-  style,
-  width = "100%",
-  height = variant === "horizontal" ? 180 : 280,
-  // Different default heights
-  isRTL: propIsRTL,
-  borderRadius = 12,
-  // Default based on images
-  darkOverlayEnabled = true,
-  darkOverlayColor = "rgba(0, 0, 0, 0.3)",
-  lockOverlay = false
-}) => {
+const SelaDealCard = props => {
+  const {
+    variant,
+    backgroundImage,
+    label,
+    labelStyle,
+    labelContainerStyle,
+    providerName,
+    providerNameStyle,
+    description,
+    descriptionStyle,
+    price,
+    priceStyle,
+    priceContainerStyle,
+    onPress,
+    style,
+    width = "100%",
+    // Default width, actual pixel width comes from layout
+    // props.height is the explicit height override
+    isRTL: propIsRTL,
+    borderRadius = 12,
+    darkOverlayEnabled = true,
+    darkOverlayColor = "rgba(0, 0, 0, 0.3)",
+    lockOverlay = false
+  } = props;
   const {
     theme,
     isRTL: themeIsRTL
   } = useTheme();
   const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
+  const [actualCardWidth, setActualCardWidth] = useState(undefined);
+  const [dynamicHeight, setDynamicHeight] = useState(undefined);
+  useEffect(() => {
+    // Calculate dynamic height if no explicit height is provided via props,
+    // and we have the actual card width and a valid background image.
+    if (props.height === undefined && actualCardWidth && actualCardWidth > 0 && backgroundImage) {
+      const asset = Image.resolveAssetSource(backgroundImage);
+      if (asset && asset.width > 0 && asset.height > 0) {
+        const aspectRatio = asset.height / asset.width;
+        setDynamicHeight(actualCardWidth * aspectRatio);
+      } else {
+        // Fallback if image source is invalid or dimensions are zero
+        // (e.g., if it was a network URL and resolveAssetSource didn't work)
+        // You might want a default height or aspect ratio here.
+        setDynamicHeight(200); // Example fallback height
+      }
+    } else if (props.height !== undefined) {
+      // If an explicit height is provided, ensure dynamicHeight is not used.
+      setDynamicHeight(undefined);
+    }
+  }, [actualCardWidth, backgroundImage, props.height]);
+  const handleLayout = event => {
+    const newWidth = event.nativeEvent.layout.width;
+    if (newWidth > 0 && newWidth !== actualCardWidth) {
+      setActualCardWidth(newWidth);
+    }
+  };
+
+  // Use explicit props.height if provided, otherwise use the calculated dynamicHeight.
+  // Provide a minimum height for initial render or if dynamicHeight is still undefined.
+  const finalHeight = props.height !== undefined ? props.height : dynamicHeight !== undefined ? dynamicHeight : 150; // Minimum height before calculation or as fallback
+
   const styles = getStyles(theme, isRTL);
+
+  // ... (rest of your style definitions: finalLabelContainerStyle, etc. remain the same)
   const finalLabelContainerStyle = [styles.labelContainerBase, labelContainerStyle];
   const finalLabelStyle = [styles.labelTextBase, labelStyle];
   const finalPriceContainerStyle = [styles.priceContainerBase, variant === "horizontal" ? styles.priceContainerHorizontal : styles.priceContainerVertical, priceContainerStyle];
@@ -52,22 +87,27 @@ const SelaDealCard = ({
     textAlign: isRTL ? "right" : "left"
   }, descriptionStyle];
   return /*#__PURE__*/_jsxs(Card, {
-    onPress: onPress,
+    onPress: onPress
+    //   onLayout={handleLayout} // Pass onLayout to Card to get its width
+    ,
     style: [styles.cardBase, {
       borderRadius,
       width,
-      height
-    }, style],
+      height: finalHeight
+    },
+    // Use the calculated finalHeight
+    style],
     backgroundImage: {
       source: backgroundImage,
-      resizeMode: "cover"
+      resizeMode: "cover" // 'cover' will fill dimensions, 'contain' would show whole image
     },
     children: [darkOverlayEnabled && /*#__PURE__*/_jsx(View, {
       style: [StyleSheet.absoluteFill, {
         backgroundColor: darkOverlayColor
       }, {
         borderRadius: borderRadius
-      }]
+      } // Ensure overlay respects border radius
+      ]
     }), /*#__PURE__*/_jsx(LockOverlay, {
       visible: lockOverlay,
       contentPosition: variant == "horizontal" ? isRTL ? "top-left" : "top-right" : isRTL ? "top-right" : "top-left",
@@ -127,12 +167,15 @@ const SelaDealCard = ({
     })]
   });
 };
+
+// getStyles function remains the same
 const getStyles = (theme, isRTL) => StyleSheet.create({
   cardBase: {
     overflow: "hidden",
     position: "relative"
   },
   overlayContainer: {
+    // This will now fill the calculated height of the card
     flex: 1,
     padding: 16,
     justifyContent: "space-between"
@@ -175,7 +218,8 @@ const getStyles = (theme, isRTL) => StyleSheet.create({
   },
   textBlockHorizontal: {
     flex: 1,
-    marginRight: 10
+    marginRight: isRTL ? 0 : 10,
+    marginLeft: isRTL ? 10 : 0
   },
   priceContainerHorizontal: {},
   bottomContentVertical: {

package/lib/module/components/Card/templates/SelaDealCard.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Text","StyleSheet","Card","useTheme","LockOverlay","jsx","_jsx","jsxs","_jsxs","SelaDealCard","variant","backgroundImage","label","labelStyle","labelContainerStyle","providerName","providerNameStyle","description","descriptionStyle","price","priceStyle","priceContainerStyle","onPress","style","width","height","isRTL","propIsRTL","borderRadius","darkOverlayEnabled","darkOverlayColor","lockOverlay","theme","themeIsRTL","undefined","styles","getStyles","finalLabelContainerStyle","labelContainerBase","finalLabelStyle","labelTextBase","finalPriceContainerStyle","priceContainerBase","priceContainerHorizontal","priceContainerVertical","finalPriceStyle","priceTextBase","providerTextStyle","providerNameBase","color","onSurface","textAlign","descriptionTextStyle","descriptionBase","cardBase","source","resizeMode","children","absoluteFill","backgroundColor","visible","contentPosition","iconSize","text","overlayOpacity","overlayContainer","topSection","alignItems","bottomContentHorizontal","textBlockHorizontal","bottomContentVertical","textBlockVertical","create","overflow","position","flex","padding","justifyContent","paddingVertical","paddingHorizontal","background","fontWeight","fontSize","onBackground","marginBottom","secondary","helper","primary","onPrimary","flexDirection","marginRight","alignSelf"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/Card/templates/SelaDealCard.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","useEffect","View","Text","StyleSheet","Image","Card","useTheme","LockOverlay","jsx","_jsx","jsxs","_jsxs","SelaDealCard","props","variant","backgroundImage","label","labelStyle","labelContainerStyle","providerName","providerNameStyle","description","descriptionStyle","price","priceStyle","priceContainerStyle","onPress","style","width","isRTL","propIsRTL","borderRadius","darkOverlayEnabled","darkOverlayColor","lockOverlay","theme","themeIsRTL","undefined","actualCardWidth","setActualCardWidth","dynamicHeight","setDynamicHeight","height","asset","resolveAssetSource","aspectRatio","handleLayout","event","newWidth","nativeEvent","layout","finalHeight","styles","getStyles","finalLabelContainerStyle","labelContainerBase","finalLabelStyle","labelTextBase","finalPriceContainerStyle","priceContainerBase","priceContainerHorizontal","priceContainerVertical","finalPriceStyle","priceTextBase","providerTextStyle","providerNameBase","color","onSurface","textAlign","descriptionTextStyle","descriptionBase","cardBase","source","resizeMode","children","absoluteFill","backgroundColor","visible","contentPosition","iconSize","text","overlayOpacity","overlayContainer","topSection","alignItems","bottomContentHorizontal","textBlockHorizontal","bottomContentVertical","textBlockVertical","create","overflow","position","flex","padding","justifyContent","paddingVertical","paddingHorizontal","background","fontWeight","fontSize","onBackground","marginBottom","secondary","helper","primary","onPrimary","flexDirection","marginRight","marginLeft","alignSelf"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/Card/templates/SelaDealCard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/components/Card/templates/SelaDealCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelaDealCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Card/templates/SelaDealCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACH,mBAAmB,EACnB,SAAS,EACT,SAAS,EAGT,SAAS,EACT,cAAc,EAEjB,MAAM,cAAc,CAAC;AAMtB,UAAU,iBAAiB;IACvB,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,eAAe,EAAE,mBAAmB,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsJ7C,CAAC;AAmEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SelaDealCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Card/templates/SelaDealCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EACL,mBAAmB,EACnB,SAAS,EACT,SAAS,EAGT,SAAS,EACT,cAAc,EAIf,MAAM,cAAc,CAAC;AAMtB,UAAU,iBAAiB;IACzB,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,eAAe,EAAE,mBAAmB,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkN7C,CAAC;AAqEF,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "related-ui-components",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "main": "./src/index.ts",
   "scripts": {
     "start": "expo start",

package/src/components/Card/templates/SelaDealCard.tsx

@@ -1,50 +1,53 @@
 // src/components/SelaDealCard/SelaDealCard.tsx
-import React from "react";
+import React, { useState, useEffect } from "react"; // Import useState and useEffect
 import {
-    ImageSourcePropType,
-    StyleProp,
-    ViewStyle,
-    View,
-    Text,
-    TextStyle,
-    DimensionValue,
-    StyleSheet,
+  ImageSourcePropType,
+  StyleProp,
+  ViewStyle,
+  View,
+  Text,
+  TextStyle,
+  DimensionValue,
+  StyleSheet,
+  Image, // Import Image
+  LayoutChangeEvent, // Import LayoutChangeEvent
 } from "react-native";
-import Card from "../Card"; // Adjust path to your Card component
-import { useTheme } from "../../../theme/ThemeContext"; // Adjust path
+import Card from "../Card";
+import { useTheme } from "../../../theme/ThemeContext";
 import { ThemeType } from "../../../theme";
 import { LockOverlay } from "../../LockOverlay";
 
 interface SelaDealCardProps {
-    variant: "horizontal" | "vertical";
-    backgroundImage: ImageSourcePropType;
-    label?: string;
-    labelStyle?: StyleProp<TextStyle>;
-    labelContainerStyle?: StyleProp<ViewStyle>;
-    providerName?: string;
-    providerNameStyle?: StyleProp<TextStyle>;
-    description?: string;
-    descriptionStyle?: StyleProp<TextStyle>;
-    price?: string;
-    priceStyle?: StyleProp<TextStyle>;
-    priceContainerStyle?: StyleProp<ViewStyle>;
-    onPress?: () => void;
-    style?: StyleProp<ViewStyle>; // Overall card style
-    width?: DimensionValue;
-    height?: DimensionValue;
-    isRTL?: boolean;
-    borderRadius?: number;
-    contentColor?: string; // For text like providerName, description on the image
-    labelBackgroundColor?: string;
-    labelTextColor?: string;
-    priceBackgroundColor?: string;
-    priceTextColor?: string;
-    darkOverlayEnabled?: boolean; // New prop
-    darkOverlayColor?: string; // New prop for custom overlay color
-    lockOverlay?: boolean
+  variant: "horizontal" | "vertical";
+  backgroundImage: ImageSourcePropType; // Each card instance can have a different image
+  label?: string;
+  labelStyle?: StyleProp<TextStyle>;
+  labelContainerStyle?: StyleProp<ViewStyle>;
+  providerName?: string;
+  providerNameStyle?: StyleProp<TextStyle>;
+  description?: string;
+  descriptionStyle?: StyleProp<TextStyle>;
+  price?: string;
+  priceStyle?: StyleProp<TextStyle>;
+  priceContainerStyle?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  width?: DimensionValue;
+  height?: DimensionValue; // Explicit height can override dynamic calculation
+  isRTL?: boolean;
+  borderRadius?: number;
+  contentColor?: string;
+  labelBackgroundColor?: string;
+  labelTextColor?: string;
+  priceBackgroundColor?: string;
+  priceTextColor?: string;
+  darkOverlayEnabled?: boolean;
+  darkOverlayColor?: string;
+  lockOverlay?: boolean;
 }
 
-const SelaDealCard: React.FC<SelaDealCardProps> = ({
+const SelaDealCard: React.FC<SelaDealCardProps> = (props) => {
+  const {
     variant,
     backgroundImage,
     label,
@@ -59,149 +62,209 @@ const SelaDealCard: React.FC<SelaDealCardProps> = ({
     priceContainerStyle,
     onPress,
     style,
-    width = "100%",
-    height = variant === "horizontal" ? 180 : 280, // Different default heights
+    width = "100%", // Default width, actual pixel width comes from layout
+    // props.height is the explicit height override
     isRTL: propIsRTL,
-    borderRadius = 12, // Default based on images
+    borderRadius = 12,
     darkOverlayEnabled = true,
     darkOverlayColor = "rgba(0, 0, 0, 0.3)",
-    lockOverlay = false
-}) => {
-    const { theme, isRTL: themeIsRTL } = useTheme();
-    const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
+    lockOverlay = false,
+  } = props;
 
-    const styles = getStyles(theme, isRTL);
+  const { theme, isRTL: themeIsRTL } = useTheme();
+  const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
 
-    const finalLabelContainerStyle: StyleProp<ViewStyle> = [
-        styles.labelContainerBase,
-        labelContainerStyle,
-    ];
-    const finalLabelStyle: StyleProp<TextStyle> = [
-        styles.labelTextBase,
-        labelStyle,
-    ];
+  const [actualCardWidth, setActualCardWidth] = useState<number | undefined>(
+    undefined,
+  );
+  const [dynamicHeight, setDynamicHeight] = useState<
+    DimensionValue | undefined
+  >(undefined);
 
-    const finalPriceContainerStyle: StyleProp<ViewStyle> = [
-        styles.priceContainerBase,
-        variant === "horizontal"
-            ? styles.priceContainerHorizontal
-            : styles.priceContainerVertical,
-        priceContainerStyle,
-    ];
-    const finalPriceStyle: StyleProp<TextStyle> = [
-        styles.priceTextBase,
-        priceStyle,
-    ];
+  useEffect(() => {
+    // Calculate dynamic height if no explicit height is provided via props,
+    // and we have the actual card width and a valid background image.
+    if (
+      props.height === undefined &&
+      actualCardWidth &&
+      actualCardWidth > 0 &&
+      backgroundImage
+    ) {
+      const asset = Image.resolveAssetSource(backgroundImage);
+      if (asset && asset.width > 0 && asset.height > 0) {
+        const aspectRatio = asset.height / asset.width;
+        setDynamicHeight(actualCardWidth * aspectRatio);
+      } else {
+        // Fallback if image source is invalid or dimensions are zero
+        // (e.g., if it was a network URL and resolveAssetSource didn't work)
+        // You might want a default height or aspect ratio here.
+        setDynamicHeight(200); // Example fallback height
+      }
+    } else if (props.height !== undefined) {
+      // If an explicit height is provided, ensure dynamicHeight is not used.
+      setDynamicHeight(undefined);
+    }
+  }, [actualCardWidth, backgroundImage, props.height]);
 
-    const providerTextStyle: StyleProp<TextStyle> = [
-        styles.providerNameBase,
-        { color: theme.onSurface, textAlign: isRTL ? "right" : "left" },
-        providerNameStyle,
-    ];
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const newWidth = event.nativeEvent.layout.width;
+    if (newWidth > 0 && newWidth !== actualCardWidth) {
+      setActualCardWidth(newWidth);
+    }
+  };
 
-    const descriptionTextStyle: StyleProp<TextStyle> = [
-        styles.descriptionBase,
-        { color: theme.onSurface, textAlign: isRTL ? "right" : "left" },
-        descriptionStyle,
-    ];
+  // Use explicit props.height if provided, otherwise use the calculated dynamicHeight.
+  // Provide a minimum height for initial render or if dynamicHeight is still undefined.
+  const finalHeight =
+    props.height !== undefined
+      ? props.height
+      : dynamicHeight !== undefined
+      ? dynamicHeight
+      : 150; // Minimum height before calculation or as fallback
 
-    return (
-        <Card
-            onPress={onPress}
-            style={[styles.cardBase, { borderRadius, width, height }, style]}
-            backgroundImage={{
-                source: backgroundImage,
-                resizeMode: "cover",
-            }}
-        >
-            {darkOverlayEnabled && (
-                <View
-                    style={[
-                        StyleSheet.absoluteFill,
-                        { backgroundColor: darkOverlayColor },
-                        { borderRadius: borderRadius }
-                    ]}
-                />
-            )}
+  const styles = getStyles(theme, isRTL);
+
+  // ... (rest of your style definitions: finalLabelContainerStyle, etc. remain the same)
+  const finalLabelContainerStyle: StyleProp<ViewStyle> = [
+    styles.labelContainerBase,
+    labelContainerStyle,
+  ];
+  const finalLabelStyle: StyleProp<TextStyle> = [
+    styles.labelTextBase,
+    labelStyle,
+  ];
+
+  const finalPriceContainerStyle: StyleProp<ViewStyle> = [
+    styles.priceContainerBase,
+    variant === "horizontal"
+      ? styles.priceContainerHorizontal
+      : styles.priceContainerVertical,
+    priceContainerStyle,
+  ];
+  const finalPriceStyle: StyleProp<TextStyle> = [
+    styles.priceTextBase,
+    priceStyle,
+  ];
 
-            <LockOverlay
-                visible={lockOverlay}
-                contentPosition={variant == "horizontal" ? 
-                    isRTL ? "top-left" : "top-right" : 
-                    isRTL ? "top-right" : "top-left"
-                }
-                iconSize={24}
-                text={""}
-                overlayOpacity={0.4}
-            />
+  const providerTextStyle: StyleProp<TextStyle> = [
+    styles.providerNameBase,
+    { color: theme.onSurface, textAlign: isRTL ? "right" : "left" },
+    providerNameStyle,
+  ];
+
+  const descriptionTextStyle: StyleProp<TextStyle> = [
+    styles.descriptionBase,
+    { color: theme.onSurface, textAlign: isRTL ? "right" : "left" },
+    descriptionStyle,
+  ];
 
-            <View style={styles.overlayContainer}>
-                <View
-                    style={[
-                        styles.topSection,
-                        {
-                            alignItems:
-                                variant === "horizontal"
-                                    ? isRTL
-                                        ? "flex-end"
-                                        : "flex-start"
-                                    : isRTL
-                                        ? "flex-start"
-                                        : "flex-end",
-                        },
-                    ]}
-                >
-                    {label && (
-                        <View style={finalLabelContainerStyle}>
-                            <Text style={finalLabelStyle}>{label}</Text>
-                        </View>
-                    )}
-                </View>
+  return (
+    <Card
+      onPress={onPress}
+    //   onLayout={handleLayout} // Pass onLayout to Card to get its width
+      style={[
+        styles.cardBase,
+        { borderRadius, width, height: finalHeight }, // Use the calculated finalHeight
+        style,
+      ]}
+      backgroundImage={{
+        source: backgroundImage,
+        resizeMode: "cover", // 'cover' will fill dimensions, 'contain' would show whole image
+      }}
+    >
+      {darkOverlayEnabled && (
+        <View
+          style={[
+            StyleSheet.absoluteFill,
+            { backgroundColor: darkOverlayColor },
+            { borderRadius: borderRadius }, // Ensure overlay respects border radius
+          ]}
+        />
+      )}
+      <LockOverlay
+        visible={lockOverlay}
+        contentPosition={
+          variant == "horizontal"
+            ? isRTL
+              ? "top-left"
+              : "top-right"
+            : isRTL
+            ? "top-right"
+            : "top-left"
+        }
+        iconSize={24}
+        text={""}
+        overlayOpacity={0.4}
+      />
+      {/* The overlayContainer with flex: 1 will now correctly fill the 'finalHeight' */}
+      <View style={styles.overlayContainer}>
+        <View
+          style={[
+            styles.topSection,
+            {
+              alignItems:
+                variant === "horizontal"
+                  ? isRTL
+                    ? "flex-end"
+                    : "flex-start"
+                  : isRTL
+                  ? "flex-start"
+                  : "flex-end",
+            },
+          ]}
+        >
+          {label && (
+            <View style={finalLabelContainerStyle}>
+              <Text style={finalLabelStyle}>{label}</Text>
+            </View>
+          )}
+        </View>
 
-                {variant === "horizontal" ? (
-                    <View style={styles.bottomContentHorizontal}>
-                        <View style={styles.textBlockHorizontal}>
-                            {providerName && (
-                                <Text style={providerTextStyle}>{providerName}</Text>
-                            )}
-                            {description && (
-                                <Text style={descriptionTextStyle}>{description}</Text>
-                            )}
-                        </View>
-                        {price && (
-                            <View style={finalPriceContainerStyle}>
-                                <Text style={finalPriceStyle}>{price}</Text>
-                            </View>
-                        )}
-                    </View>
-                ) : (
-                    <View style={styles.bottomContentVertical}>
-                        <View style={styles.textBlockVertical}>
-                            {providerName && (
-                                <Text style={providerTextStyle}>{providerName}</Text>
-                            )}
-                            {description && (
-                                <Text style={descriptionTextStyle}>{description}</Text>
-                            )}
-                        </View>
-                        {price && (
-                            <View style={finalPriceContainerStyle}>
-                                <Text style={finalPriceStyle}>{price}</Text>
-                            </View>
-                        )}
-                    </View>
-                )}
+        {variant === "horizontal" ? (
+          <View style={styles.bottomContentHorizontal}>
+            <View style={styles.textBlockHorizontal}>
+              {providerName && (
+                <Text style={providerTextStyle}>{providerName}</Text>
+              )}
+              {description && (
+                <Text style={descriptionTextStyle}>{description}</Text>
+              )}
+            </View>
+            {price && (
+              <View style={finalPriceContainerStyle}>
+                <Text style={finalPriceStyle}>{price}</Text>
+              </View>
+            )}
+          </View>
+        ) : (
+          <View style={styles.bottomContentVertical}>
+            <View style={styles.textBlockVertical}>
+              {providerName && (
+                <Text style={providerTextStyle}>{providerName}</Text>
+              )}
+              {description && (
+                <Text style={descriptionTextStyle}>{description}</Text>
+              )}
             </View>
-        </Card>
-    );
+            {price && (
+              <View style={finalPriceContainerStyle}>
+                <Text style={finalPriceStyle}>{price}</Text>
+              </View>
+            )}
+          </View>
+        )}
+      </View>
+    </Card>
+  );
 };
 
+// getStyles function remains the same
 const getStyles = (theme: ThemeType, isRTL: boolean) => StyleSheet.create({
     cardBase: {
         overflow: "hidden",
         position: "relative",
     },
-    overlayContainer: {
+    overlayContainer: { // This will now fill the calculated height of the card
         flex: 1,
         padding: 16,
         justifyContent: "space-between",
@@ -245,7 +308,8 @@ const getStyles = (theme: ThemeType, isRTL: boolean) => StyleSheet.create({
     },
     textBlockHorizontal: {
         flex: 1,
-        marginRight: 10,
+        marginRight: isRTL ? 0 : 10,
+        marginLeft: isRTL ? 10 : 0,
     },
     priceContainerHorizontal: {
     },