## ScratchCard Documentation

The `ScratchCard` is an interactive component that creates a scratch-to-reveal experience commonly used for promotions, rewards, and gamification features. It leverages the Shopify React Native Skia library to provide a smooth scratching animation with customizable appearance. The component tracks scratching progress and can trigger an action when a sufficient area has been revealed.

### Usage

```tsx
import ScratchCard from "@/components/ScratchCard/ScratchCard";
import ScratchCardContent from "@/components/ScratchCard/ScratchCardContent";
import { Image, Text, View } from "react-native";

const MyComponent = () => {
  const handleRevealed = () => {
    // Handle card fully revealed action
    console.log("Scratch card revealed!");
  };

  return (
    <View style={{ width: 300, height: 200 }}>
      <ScratchCard 
        image={require("@/assets/images/scratch_foreground.png")}
        onScratched={handleRevealed}
        brushStrokeWidth={40}
        revealThreshold={0.7}
      >
        <ScratchCardContent>
          <Image 
            source={require("@/assets/images/reward-banner.png")} 
            style={{ width: 250, height: 150 }}
          />
        </ScratchCardContent>
      </ScratchCard>
    </View>
  );
};

export default MyComponent;
```

### Text-Based Example

```tsx
<ScratchCard 
  backgroundColor="#8A2BE2"
  text="Scratch to reveal your prize!"
  textFontColor="#FFFFFF"
  textFontSize={18}
  width={300}
  height={150}
  onScratched={() => alert("Congratulations! You won a prize!")}
>
  <ScratchCardContent style={{ backgroundColor: "#FFD700" }}>
    <Text style={{ fontSize: 24, fontWeight: "bold", color: "#000" }}>
      50% OFF COUPON
    </Text>
    <Text style={{ marginTop: 8, color: "#333" }}>
      Use code: SCRATCH50
    </Text>
  </ScratchCardContent>
</ScratchCard>
```

### Props

#### Core Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `style` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the container |
| `children` | `React.ReactNode` | Required | Content to reveal underneath the scratch layer |
| `image` | `ImageSourcePropType` | `null` | Image to use as the scratch layer |
| `width` | `number` | `300` | Width of the scratch card |
| `height` | `number` | `300` | Height of the scratch card |
| `onScratched` | `() => void` | `undefined` | Function to call when scratch threshold is reached |

#### Scratch Behavior Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `brushStrokeWidth` | `number` | `50` | Width of the scratching stroke |
| `revealThreshold` | `number` | `0.8` | Percentage (0.0-1.0) that needs to be scratched to trigger the reveal |

#### Appearance Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `backgroundColor` | `string` | `"#CCCCCC"` | Background color of the scratch layer (used if no image is provided) |
| `text` | `string` | `""` | Optional text to display on the scratch layer |
| `textFont` | `ImageSourcePropType` | `undefined` (required if text is present) | Font for the scratch layer text |
| `textFontColor` | `string` | `"#CCCCCC"` | Color for the scratch layer text |
| `textFontSize` | `number` | `16` | Font size for the scratch layer text |

### ScratchCardContent

The `ScratchCardContent` is a companion component that provides styling for the content underneath the scratch layer.

#### Usage

```tsx
import ScratchCardContent from "@/components/ScratchCard/ScratchCardContent";

<ScratchCardContent style={{ backgroundColor: "#f5f5f5" }}>
  <Text>Your revealed content here</Text>
</ScratchCardContent>
```

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | Required | Content to display underneath the scratch layer |
| `style` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the content container |

### Related Components

- `ScratchCardContent`: Used for styling the revealed content
- `Image`: Used to display images in the scratch content or as the scratch layer
- `Text`: Used to display text in both the scratch layer and revealed content
- `View`: The foundation component for layout structure