# Popup

![Standard Popup Example](../../assets/components/Popup-1.png)
![Popup with RTL](../../assets/components/Popup-3.png)
![Popup with background image](../../assets/components/Popup-2.png)


## Popup Documentation

The `Popup` is a versatile modal component designed for displaying important information, confirmations, or actions to users. It provides a customizable interface with support for background images, illustrations, titles, content text, and action buttons. The component is fully RTL-compatible and offers different variants for close button positioning.

### Usage

```tsx
import Popup from "@/components/Popup";
import { useTheme } from "../../theme";

const MyComponent = () => {
  const [isVisible, setIsVisible] = useState(false);
  const theme = useTheme();
  
  const handleClose = () => setIsVisible(false);
  const handlePrimaryAction = () => {
    // Do something
    handleClose();
  };

  return (
      <Popup
        visible={isVisible}
        onClose={handleClose}
        showCloseIcon={true}
        containerStyle={{ borderColor: "white", borderWidth: 1, height: 300, width:400 }}
        title="UNLOCK"
        closeIconVariant="nested"
        content="Upgrade to Visa signature to get your Card Now!"
        primaryButtonText="Upgrade"
        subtitle={`60%\nDiscount`}
        backgroundImage={require("@/assets/images/face.jpg")}
        onPrimaryButtonPress={handleUpgrade}
        contentContainerStyle={{backgroundColor:"rgba(0,0,0,0.5)", flex: 1}}
        closeIconContainerStyle={{backgroundColor:"white"}}
        customCloseIcon={<Ionicons name="close" size={20} color={"black"} />}
      />
  );
};
```

### Illustration Example

```tsx
      <Popup
        visible={isVisible}
        onClose={handleClose}
        showCloseIcon={true}
        containerStyle={{ borderColor: "white", borderWidth: 1 }}
        illustrationImage={require('@/assets/images/upgrade.png')} // Path to your illustration
        title="UNLOCK"
        closeIconVariant="nested"
        content="Upgrade to Visa signature to get your Card Now!"
        primaryButtonText="Upgrade"
        primaryButtonStyle={{width: 300, backgroundColor:"#E94DAA"}}
        onPrimaryButtonPress={handleUpgrade}
        customCloseIcon={<Ionicons
                      name="close"
                      size={20}
                      color={"#E94DAA"}/>}
      />
```

### RTL

```tsx
<Popup
  visible={isVisible}
  onClose={handleClose}
  showCloseIcon={true}
  title="ترقية إلى النسخة المميزة"
  subtitle="استمتع بمزايا حصرية"
  content="احصل على جميع الميزات المتقدمة والمحتوى الحصري بدون إعلانات. اشترك الآن واستمتع بتجربة كاملة مع تحديثات مجانية لمدة عام كامل."
  primaryButtonText="ترقية الآن"
  secondaryButtonText="ليس الآن"
  onPrimaryButtonPress={handleUpgrade}
  onSecondaryButtonPress={handleDismiss}
  isRTL={true}
/>
```

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `visible` | `boolean` | Required | Controls the visibility of the popup |
| `onClose` | `() => void` | Required | Function to call when popup should be closed |
| `backgroundImage` | `ImageSourcePropType` | `undefined` | Optional background image for the popup |
| `title` | `string` | `undefined` | Main title text |
| `subtitle` | `string` | `undefined` | Subtitle text displayed below title |
| `content` | `string` | `undefined` | Main content text |
| `children` | `ReactNode` | `undefined` | Custom content to render inside the popup |
| `primaryButtonText` | `string` | `undefined` | Text for the primary action button |
| `onPrimaryButtonPress` | `() => void` | `undefined` | Function to execute when primary button is pressed |
| `secondaryButtonText` | `string` | `undefined` | Text for the secondary action button |
| `onSecondaryButtonPress` | `() => void` | `undefined` | Function to execute when secondary button is pressed |
| `closeOnBackdropPress` | `boolean` | `true` | Whether tapping outside the popup should close it |
| `showCloseIcon` | `boolean` | `false` | Whether to show the close icon button |
| `closeIconVariant` | `"floating" \| "nested"` | `"floating"` | Style variant for the close icon position |
| `customCloseIcon` | `ReactNode` | `undefined` | Custom component to use as close icon |
| `illustrationImage` | `ImageSourcePropType` | `undefined` | Image to display at the top of the content area |
| `isRTL` | `boolean` | `false` | Whether to render in right-to-left mode |
| `containerStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the container |
| `contentContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the content container |
| `titleStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the title text |
| `subtitleStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the subtitle text |
| `contentStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the content text |
| `primaryButtonStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the primary button |
| `primaryButtonTextStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the primary button text |
| `secondaryButtonStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the secondary button |
| `secondaryButtonTextStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the secondary button text |
| `closeIconContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the close icon container |
| `closeIconStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the close icon |
| `illustrationStyle` | `StyleProp<ImageStyle>` | `undefined` | Additional styles for the illustration image |

### Close Icon Variants

- **Floating**: The close icon appears outside the popup's main border, creating a floating effect
- **Nested**: The close icon appears inside the popup's border in the top-right (or top-left in RTL mode)

### Related Components

- `Modal`: The native React Native component used as the foundation
- `ImageBackground`: Used when a background image is provided
- `TouchableOpacity`: Used for the buttons and close icon
- `Text`: Used for rendering text content