# SpinWheel Component

A customizable spinning wheel component for React Native applications that allows users to create interactive prize wheels, random selectors, or game elements.

## Basic Usage

```jsx
import React, { useState } from 'react';
import { View, Alert } from 'react-native';
import { SpinWheel } from '@your-org/component-library';

const MySpinWheelExample = () => {
  const items = [
    { id: 1, label: '10% OFF', color: '#FF0000', value: { discount: 10 } },
    { id: 2, label: '20% OFF', color: '#00FF00', value: { discount: 20 } },
    { id: 3, label: '30% OFF', color: '#0000FF', value: { discount: 30 } },
    { id: 4, label: 'FREE GIFT', color: '#FFFF00', value: { type: 'gift' } },
    { id: 5, label: 'BETTER LUCK', color: '#FF00FF', value: null },
  ];

  const handleWin = (item) => {
    Alert.alert('Congratulations!', `You won: ${item.label}`);
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <SpinWheel 
        items={items}
        size={300}
        onSpinEnd={handleWin}
      />
    </View>
  );
};

export default MySpinWheelExample;
```

## Props

### Data Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `items` | `SpinWheelItem[]` | ✅ | `[]` | Array of items to display on the wheel |

#### SpinWheelItem Interface

```typescript
interface SpinWheelItem {
  id: string | number;      // Unique identifier
  label: string;            // Text to display on the wheel
  value?: any;              // Optional value associated with the item
  color: string;            // Background color (HEX, RGB, or named color)
  textColor?: string;       // Text color (defaults to wheelTextColor)
}
```

### Dimension Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `size` | `number` | ❌ | `300` | Diameter of the wheel in pixels |

### Behavior Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `spinDuration` | `number` | ❌ | `5000` | Duration of spin animation in milliseconds |
| `enabled` | `boolean` | ❌ | `true` | Whether the wheel can be spun |

### Event Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `onSpinStart` | `() => void` | ❌ | - | Callback function called when spinning starts |
| `onSpinEnd` | `(item: SpinWheelItem) => void` | ❌ | - | Callback function called when spinning ends with the winning item |

### Styling Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `containerStyle` | `ViewStyle` | ❌ | - | Custom style for the container |
| `centerStyle` | `ViewStyle` | ❌ | - | Custom style for the center of the wheel |
| `spinButtonText` | `string` | ❌ | `"Spin"` | Text for the spin button |
| `spinButtonStyle` | `ViewStyle` | ❌ | - | Custom style for the spin button |
| `spinButtonTextStyle` | `TextStyle` | ❌ | - | Custom style for the spin button text |
| `wheelTextStyle` | `TextStyle` | ❌ | - | Custom style for the text on the wheel |
| `knobStyle` | `ViewStyle` | ❌ | - | Custom style for the pointer |
| `actionButtonStyle` | `ViewStyle` | ❌ | - | Custom style for the action button |
| `actionButtonTextStyle` | `TextStyle` | ❌ | - | Custom style for the action button text |
| `wheelBorderColor` | `string` | ❌ | `"#000000"` | Color of the wheel border |
| `wheelTextColor` | `string` | ❌ | `"#FFFFFF"` | Default color of text on the wheel |
| `knobColor` | `string` | ❌ | `"#D81E5B"` | Color of the pointer |
| `centerComponent` | `React.ReactNode` | ❌ | - | Custom component to render in the center |

## Advanced Examples

### Custom Styling

```jsx
<SpinWheel 
  items={items}
  size={350}
  spinDuration={6000}
  knobColor="#FF5722"
  wheelTextColor="#000000"
  containerStyle={{ backgroundColor: '#F5F5F5', padding: 20, borderRadius: 10 }}
  centerStyle={{ backgroundColor: '#FFC107' }}
  spinButtonText="Try Your Luck!"
  spinButtonStyle={{ backgroundColor: '#4CAF50' }}
  spinButtonTextStyle={{ color: 'white', fontSize: 18 }}
  onSpinEnd={handleWin}
/>
```

<!-- ### With Custom Center Component

```jsx
<SpinWheel 
  items={items}
  size={400}
  centerComponent={
    <Image 
      source={require('./logo.png')} 
      style={{ width: 60, height: 60 }}
    />
  }
  onSpinEnd={handleWin}
/>
``` -->

### Disabled State

```jsx
<SpinWheel 
  items={items}
  enabled={userHasCredits}
  onSpinEnd={handleWin}
/>
```