# RedemptionOption Component

A flexible, customizable touchable option component for React Native applications with support for icons, vertical/horizontal layouts, active states, and extensive styling options.

## Basic Usage

```jsx
import React from 'react';
import { View } from 'react-native';
import { RedemptionOption } from '@your-org/component-library';
import { GiftIcon } from '@your-org/icons';

const RewardsScreen = () => {
  return (
    <View style={{ padding: 16 }}>
      <RedemptionOption
        icon={<GiftIcon size={24} color="#FFFFFF" />}
        text="Redeem Points"
        onPress={() => console.log('Option pressed')}
      />
    </View>
  );
};

export default RewardsScreen;
```

## Props

The `RedemptionOption` component provides extensive customization options through its props.

### Core Properties

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `icon` | `React.ReactNode` | ✅ | - | Icon component to display in the option |
| `text` | `string` | ✅ | - | Text label to display with the icon |

### Layout & Appearance Properties

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `orientation` | `"vertical" \| "horizontal"` | ❌ | `"vertical"` | Determines the layout direction of icon and text |
| `backgroundColor` | `string` | ❌ | theme.primary | Background color of the option |
| `textColor` | `string` | ❌ | theme.secondary | Color of the text label |
| `width` | `number \| string` | ❌ | - | Width of the option component |
| `height` | `number \| string` | ❌ | - | Height of the option component |
| `borderRadius` | `number` | ❌ | `8` | Corner radius of the option component |
| `padding` | `number` | ❌ | `12` | Padding inside the option component |
| `fontSize` | `number` | ❌ | `14` | Base font size for the text (actual size will be 90% of this value) |

### State Properties

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `disabled` | `boolean` | ❌ | `false` | Whether the option is disabled (reduces opacity and prevents interaction) |
| `isActive` | `boolean` | ❌ | `false` | Whether the option is in active state (adds a border) |
| `activeOpacityValue` | `number` | ❌ | `0.7` | The opacity value when the button is pressed |

### Style Customization

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `containerStyle` | `StyleProp<ViewStyle>` | ❌ | - | Style for the outer container |
| `textStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the text label |
| `iconContainerStyle` | `StyleProp<ViewStyle>` | ❌ | - | Style for the container around the icon |

### Behavior Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `onPress` | `() => void` | ❌ | - | Function to call when the option is pressed |

## Examples

### Vertical Layout (Default)

```jsx
<RedemptionOption
  icon={<CoinIcon size={24} color="#FFD700" />}
  text="Redeem Coins"
  onPress={() => handleRedemption('coins')}
  backgroundColor="#2C3E50"
  textColor="#FFFFFF"
/>
```

### Horizontal Layout

```jsx
<RedemptionOption
  icon={<TicketIcon size={20} color="#FF5722" />}
  text="Movie Tickets"
  orientation="horizontal"
  onPress={() => handleRedemption('tickets')}
  width="100%"
  padding={16}
/>
```

### Active State

```jsx
<RedemptionOption
  icon={<StarIcon size={22} color="#FFD700" />}
  text="Premium Rewards"
  isActive={selectedReward === 'premium'}
  onPress={() => setSelectedReward('premium')}
  backgroundColor="#1E88E5"
  textColor="#FFFFFF"
/>
```

### Disabled State

```jsx
<RedemptionOption
  icon={<LockIcon size={20} color="#9E9E9E" />}
  text="Locked Reward"
  disabled={!hasEnoughPoints}
  onPress={() => handleRedemption('locked')}
  backgroundColor="#ECEFF1"
  textColor="#757575"
/>
```

### Custom Styling

```jsx
<RedemptionOption
  icon={<GiftIcon size={28} color="#E91E63" />}
  text="Special Offer"
  containerStyle={{
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 5,
  }}
  iconContainerStyle={{
    backgroundColor: 'rgba(233, 30, 99, 0.1)', 
    borderRadius: 20,
    padding: 8
  }}
  textStyle={{ fontWeight: 'bold', letterSpacing: 0.5 }}
  onPress={() => handleSpecialOffer()}
/>
```