# Banner

![Banner Component](../../assets/components/SimpleBanner.png)

## Banner Documentation

The `Banner` is a customizable banner component with a background image and an optional action button. It supports different vertical alignments, custom styling, and an optional icon that can be positioned on either side of the button text.

### Usage

```tsx
import Banner from "@/components/Card/templates/Banner";
import { Ionicons } from "@expo/vector-icons";

const MyComponent = () => {
  return (
    <Banner
      backgroundImage={require("@/assets/images/banner-bg.jpg")}
      buttonText="Redeem Now"
      onButtonPress={() => Alert.alert("Button pressed")}
      onBannerPress={() => Alert.alert("Banner pressed")}
      height={200}
      contentAlignment="bottom"
      icon={<Ionicons name="gift-outline" size={20} color="#FFFFFF" />}
      iconPosition="left"
    />
  );
};
```

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `backgroundImage` | `ImageSourcePropType` | Required | The background image to display in the banner |
| `buttonText` | `string` | `"Redeem"` | Text to display on the action button |
| `onButtonPress` | `() => void` | `undefined` | Function to execute when the button is pressed |
| `onBannerPress` | `() => void` | `undefined` | Function to execute when the banner (outside the button) is pressed |
| `containerStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the banner container |
| `backgroundImageStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the background image |
| `contentContainerStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the content container |
| `buttonStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the button |
| `buttonTextStyle` | `TextStyle` | `undefined` | Additional styles to apply to the button text |
| `height` | `DimensionValue` | `300` | Height of the banner |
| `customButton` | `React.ReactNode` | `undefined` | Custom button component to replace the default button |
| `contentAlignment` | `"top" \| "center" \| "bottom"` | `"center"` | Vertical alignment of the content within the banner |
| `icon` | `React.ReactNode` | `undefined` | Optional icon to display alongside the button text |
| `iconPosition` | `"left" \| "right"` | `"left"` | Position of the icon relative to the button text |
| `iconStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the icon container |
| `iconSpacing` | `number` | `8` | Spacing between the icon and button text |

### Related Components

- `Card`: The base component used for the overall container
- `CardFooter`: Contains the button and manages content positioning

# BannerWithDetails

![BannerWithDetails Component](../../assets/components/BannerWithDetails.png)

## BannerWithDetails Documentation

The `BannerWithDetails` is a visually appealing banner component that combines a background image with a prominently featured logo and a card containing detail text. It's designed for showcasing brand information or promotional content with a clean, elevated appearance.

### Usage

```tsx
import BannerWithDetails from "@/components/Card/templates/BannerWithDetails";

const MyComponent = () => {
  return (
    <BannerWithDetails
      backgroundImage={require("@/assets/images/banner-bg.jpg")}
      logoImage={require("@/assets/images/company-logo.png")}
      detailText="Limited time offer: 25% off on all premium items!"
      onPress={() => Alert.alert("Banner pressed")}
    />
  );
};
```

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `backgroundImage` | `ImageSourcePropType` | Required | The background image for the banner |
| `logoImage` | `ImageSourcePropType` | Required | The logo image to display in the centered card |
| `detailText` | `string` | Required | Text description to display in the details card |
| `onPress` | `() => void` | `undefined` | Function to execute when the banner is pressed |
| `containerStyle` | `ViewStyle` | `undefined` | Additional styles for the main container |
| `imageStyle` | `ViewStyle` | `undefined` | Additional styles for the background image |
| `logoContainerStyle` | `ViewStyle` | `undefined` | Additional styles for the logo container |
| `logoStyle` | `ImageStyle` | `undefined` | Additional styles for the logo image |
| `textContainerStyle` | `ViewStyle` | `undefined` | Additional styles for the text container |
| `textStyle` | `TextStyle` | `undefined` | Additional styles for the detail text |
| `customDetailContent` | `React.ReactNode` | `undefined` | Custom content to replace the default detail text |

### Related Components

- `Card`: Used for the main container, logo container, and text container
- `CardContent`: Manages the positioning of the logo and text containers